axios

引入axios

npm install axios

或者直接引入js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用axios

// 通过 params 设置参数：
axios.get('/url', {
    params: {
      ID: 123
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios回调函数中的this指向改变,无法访问data中的数据，所以要在axios之前把this赋值给that，在axios的then回调函数中使用that访问data。

使用application/x-www-form-urlencoded请求

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api', params);

URLSearchParams 不是所有的浏览器均支持。可以使用 qs 库来编码数据:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

// Or in another way (ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

配置默认值

/*全局的axios默认值*/
axios.defaults.baseURL = 'url';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/*自定义实例默认值*/
//创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'url'
});
//在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

拦截器

// 添加请求拦截器
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);
  });