axios使用方法及常见问题解决方案

您所在的位置：网站首页 › 前端常见安全问题及解决方法 › axios使用方法及常见问题解决方案

axios使用方法及常见问题解决方案

2024-07-11 02:35| 来源: 网络整理| 查看: 265

axios

一款基于 XMLHttpRequest 对象封装的网络请求工具。同时支持浏览器端与Node端。集成了 Promise

特点从浏览器中创建 XMLHttpRequest从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF 安装 axios $ npm install axios 语法 axios.get(url, [options]).then().catch() axios.post(url, [body], [options]).then().catch() ... axios(options).then().catch() 问题

1.请求完成，发现 res 不是后台给我的数据？

axios 的响应数据不是接口直接的响应。而是axios的一个包装对象。这个对象结构如下

{ // 这个属性，才是接口的响应 data: {}, // 响应的状态码 status: 200, // 响应的状态信息 statusText: 'OK', // 响应头信息 headers: {}, // 请求的一些配置信息 config: {}, // XMLHttpRequest 对象的一些信息 request: {} }

2.GET请求需要传参时，后台告诉我参数不对，没有接受到参数？

看一下 network 是否真的传递了参数，确保一下 axios 的问号参数是通过 params 配置项传递的。

或者直接将参数拼接在 url 地址上。

3.POST请求时，后台告诉我参数接受不到？

先确保我们前端参数传递正确了 (看语法有没有写错）

询问后台是否支持 json 格式的数据（axios，默认都是一个json格式的数据传输）

方案一、让后台支持一下 json 格式

方案二、前端自己对参数做转化，转换成 key1=value1&key2=value2 这种格式的数据。使用 transformRequest 这个配置项。

4.后台的一些接口中，需要前端在请求头中传递token，如何优雅的去做呢？

普通方案：在请求时配置 headers 这个配置项

优雅方案：对 axios 做一些默认配置

axios.defaults.headers = { token: '123456' } // 不要这样写，覆盖了默认的 headers axios.defaults.headers['token'] = '123456' // 这样写，才对 //也可以这样写 axios,defaulte.headers.token='123'

5.第4点中，我们的token是写死的。正常token应该是要灵活设置才对？

拦截器的语法：

// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });

在请求拦截中处理

axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 if (window.localStorage.getItem('token')) { config.headers.token = window.localStorage.getItem('token') } return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) })

6. 每次要得到后台的响应结果时，都是通过 res.data 获取的。能不能直接通过 res 获取呢？

在响应拦截中处理

axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response.data }, function (error) { // 对响应错误做点什么 return Promise.reject(error) })

7.每个文件都要单独去引入一下 axios 好麻烦。能不能像 vue-resource 一样。类似通过 this.$http 去用呢？

将 axios 挂载到 Vue 的原型上即可

// main.js import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios

以上仅个人处理观点，欢迎大佬评论区指点

参考文档

【本文地址】

axios使用方法及常见问题解决方案

axios使用方法及常见问题解决方案

今日新闻

推荐新闻