AXIOS 干货满满 包含项目常用访问方式

axios中文网
之前公司的项目都是封装好的工具函数 直接写配置项(接口地址，参数等等)和成功失败的回调函数和错误处理即可。
现在新公司新项目，没有再往axios上封装一层工具函数，而是直接使用。故在之前自己对axios简单理解的基础上，重新认识与总结下。

axios是对象也是函数
与jquery的ajax类似，都是对http请求的封装，但它能够更好的支持promise
内部是xhr操作与对函数参数的处理
下面可作为axios对象内部的简单实现

创建实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});//这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

拦截器

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

使用 then 时，你将接收下面这样的响应 :

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

干货：实操代码：

1、直接使用axios.get axios.post 等类AJAX方法 但不可动态配置 不推介

axios.post('http://api-cloud.dev.xueping.com/exam/list', {//基于baseURL
    grade: ""
})
.then(function (res) {  //相比于工具函数request少了一步token与store操作  返回参数就变成重新登陆了
    console.log(res);
    res.data.total?alert('调用成功，共查询到'+res.data.total+'条数据'):alert(res.data.message)
})
.catch(function (error) {
    console.log(error);
});

2、使用create方法创建axios实例使用

 const instance = axios.create({
     baseURL: 'http://api-cloud.dev.xueping.com/',
     timeout: 1000,
     url: 'exam/list',
     method: 'post',
     data: { grade: ""}
 });
 instance().then((res)=>{
     console.log(res);
     res.data.total?alert('调用成功，共查询到'+res.data.total+'条数据'):alert(res.data.message)
 }).catch((error)=>{
     console.log(error);
 })

3、创建公用的axios实例 作为工具函数使用 配合各个接口传入参数进行访问 推介

• axios全局函数util
  通用axios工具函数，这里叫他util：

import axios from 'axios';
import store from '@store'
import {Message} from 'element-ui';

const service = axios.create({
    baseURL: 'baseURL',
    timeout: 100000,
});

service.interceptors.request.use(
    //  添加请求拦截器  若不是登陆操作 设置请求头将用户信息带到后台   
    config => {
        if(!config.url === 'coach/login') {
            return config
        }else {
            const token = store.getters.token;
            config.headers['authorization'] = token;
            return config
        }
    },
    error => {
        console.dir(error);
        return Promise.reject(error);// axios基于promise  错误时直改变axios为失败态
    }
);


service.interceptors.response.use(
    //  添加响应拦截器  
    response => {
        const {status,message} = response.data;
        if(status !== 1) {
            Message.error(message)
            return Promise.reject(response);// axios基于promise  若响应体状态码不成功 !==1  改变axios为失败态
        }
        const {data} = response;
        return data//返回请求成功得到的数据
    },
    error => {
        console.log(error);
        return Promise.reject(error);// axios基于promise  若响应体错误  改变axios为失败态
    }
)

export default service;

• 接口文件 interface
  可通用的接口函数 根据业务与后端确认后设置好请求路径与参数结构等 本函数可全局使用 每一个需要使用本接口的VUE实例直接引入传参执行后即可得到数据

import util from '@utils/util';
/* 引入上文util工具函数  针对不同接口不同参数情况进行相应配置 */
export function zzcTest(query) {//
    let data = {
    	...query
    }
    return util({
        url: 'interface/getdata',
        method: 'get',
        data: data
    })
    //直接使用axios实例函数util  并根据接口情况传参
}

• vue实例引入使用

import {interface} from '../api/interface'

...

interface().then((res) => {
    console.log(res);
    res.data.total&&alert('调用成功，共查询到'+res.data.total+'条数据');
}).catch((err) =>{
    console.log(err);
    alert('抛出错误');
})