axios 的详细内容和完整的软件包方法

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

{
  // 路径url
  url: '/user',
 
  // 请求方法，默认get
  method: 'get', 
 
  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',
 
  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
  ID: 12345,
  name:"Jack"
  },
 
 //设置请求体
  data: {
  firstName: 'Fred'
  },
 
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',
 
 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,
 
  //响应数据类型，默认json
  responseType: 'json', 
 
  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',
 
  //响应体的最大长度 
  maxContentLength: 2000,
 
  // 请求体的最大长度
  maxBodyLength: 2000,
 
  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
  return status >= 200 && status < 300; 
  },

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"""
自定义实例默认值
"""
// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
  }, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
  });

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

const controller = new AbortController();
 
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

let source = axios.CancelToken.source();
 
axios.get('/users/12345',{
        cancelToken: source.token
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        //取消请求后会执行该方法
        console.log(err)
      })
 
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

const CancelToken = axios.CancelToken;
let cancel;
 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
  // executor 函数接收一个 cancel 函数作为参数
  cancel = c;
  })
});
 
// 取消请求
cancel();

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant';

// => 环境的切换
if (process.env.NODE_ENV == 'development') {    
  axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
  axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
  axios.defaults.baseURL = 'https://www.production.com';
}

axios.defaults.timeout = 10000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

请求拦截
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';
 
// 请求拦截器axios.interceptors.request.use(    
  config => {        
    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    const token = store.state.token;        
    token && (config.headers.Authorization = token);        
    return config;    
  },    
  error => {        
    return Promise.error(error);    
})