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

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

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

参考文档