本文已参与[新人创作礼]活动，一起开启掘金创作之路。

Axios简介

Axios是一个基于promise的网络请求库，可以用于浏览器和node.js。

在浏览器端借助axios向服务端发送Ajax请求获取数据。在Node.js中向远程服务发送Http请求。

Axios官网地址：axios-http.com/zh/

可以通过axios函数发送请求，也可以通过axios的方法发送请求：axios-http.com/zh/docs/api…

请求的config参数

请求的config参数是创建请求时可以用的配置选项，只有url是必须的，没有指定method则默认为是GET请求。

官网很详细的介绍了所有配置项：axios-http.com/zh/docs/req…

响应结构

响应结构包含了一个请求响应的信息。

官网地址介绍请求响应信息：axios-http.com/zh/docs/res…

自定义实例

可通过axios创建实例对象发送请求，这样请求几个不同的服务器，就可以创建几个实例对象，然后针对不同服务器进行配置。通过axios.create创建实例，创建的实例也是一个Promise对象，里面写一些请求的config参数。

服务器1：

// 创建实例instance1
const instance1 = axios.create({ baseURL: 'https://api.example1.com' });
// 所有使用此实例的请求都将默认为GET请求。
instance1.defaults.method = 'GET';
instance({
    url:'',
    ...
}).then(()=>{})

服务器2：

// 创建实例instance2
const instance2 = axios.create({ baseURL: 'https://api.example2.com' });
// 所有使用此实例的请求都将默认为POST请求。
instance2.defaults.method = 'POST';
instance2({
    url:'',
    // 请求方式不使用默认值
    method:'GET',
    ...
}).then(()=>{})

如果给api.example1.com 发送请求，就使用instance1调用方法发送请求。如果给api.example2.com 发送请求，就使用instance2调用方法发送请求。这样就做到一一对应了，想给哪个服务器发就调用哪个实例对象。

默认配置

默认配置有三种。全局默认配置、实例默认配置、请求的config参数。

全局默认配置：

axios.defaults.method = 'GET'

实例默认配置:

const instance = axios.create({
	// 请求config参数
})
// 实例默认配置
instance.defaults.method = 'GET'

请求的config参数:

axios({
    // 请求的config参数
    method: 'GET'
})

const instance = axios.create({
	// 请求的config参数
	method: 'GET'
})

优先级:在lib/defaults.js中库的默认值 < 实例defaults默认值 < 请求的config参数

后面的优先级高于前面。

拦截器

axios拦截器（Promise对象）主要分为请求拦截器和响应拦截器，通过指定回调进行处理，可以设置多个请求和响应拦截。每个拦截器可以设置两个拦截函数，成功拦截函数和失败拦截函数。多个请求拦截器（1 2），从后往前执行（2 1）。多个响应拦截器（1 2），从前往后执行（1 2）。

在调用axios.request()后，请求就会先进入请求拦截器，如果正常就一直执行成功拦截函数，失败则执行失败拦截函数。调用请求响应后，会根据响应信息进入响应成功拦截函数或者响应失败拦截函数。

使用拦截器做一些统一的处理：

请求拦截器：在请求发送前进行必要的操作处理。可以用来设置统一的请求头、处理统一的请求数据、添加统一cookie、请求体加验证。相当于对每个接口里相同操作的一个封装（每个请求都带的参数，如token等）。

响应拦截器：可以根据响应状态码做统一的提示信息、响应数据统一处理等操作，对状态码进行判断，可用于判断登录是否失效，自动跳转到登录页。

官网地址：axios-http.com/zh/docs/int…

请求拦截器

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

Axios简单使用

简单介绍了axios从引入到页面使用。

安装插件

npm install axios

这样就可以在页面中使用了，但是一般都会配置一些拦截器等。

在src目录下创建api目录，里面就放配置文件。

文件结构：

创建实例并配置拦截器

apiConfig.js

// 引入axios
import axios from "axios";
// 路由
import router from "@/router";

// 这里创建一个实例
const axiosConfig = new axios.create({
    // 基础配置，官网有介绍。
    baseURL: '/',
    timeout: 60000,
    responseType: 'json',
    // withCredentials: true, // 是否允许带cookie这些
    // 跨域请求想要带上cookies
    crossDomain: true, 
    xhrFields: {
        withCredentials: true
    },
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    }
})

// 配置请求拦截器
axiosConfig.interceptors.request.use(config => {
    // 发送请求之前做什么
    // 在登录时，将token存在sessionStorage里面。
    const token = sessionStorage.getItem('token');
    // 如果token存在，则发送请求时带上token
    if(token){
        // config.headers.token = token;
        config.headers.common["Security-Token"] = token
    }
    console.log('接口请求成功');
    return config;
},err => {
    // 请求发送失败做什么
    console.log('接口请求失败');
    return Promise.reject(err);
})

// 配置响应拦截器
axiosConfig.interceptors.response.use(response => {
    // 成响应，对状态码等操作。
    if(!response.status == 200 || !response.status == '200'){
        // 这里可以设置弹窗
        console.log('接口请求失败');
    }
    if(response.status == 401 || response.status =='401'){
        // 这里可以设置弹窗
        console.log('请重新登录');
        // 跳转至首页
        router.push({
            name: 'school'
        })
    } else {
        return response.data;
    }
    console.log('接口响应成功');
},err => {
    // 响应失败做的事
    if(err.response){
        if(err.response.status == 404 || err.response.status =='404'){
            setTimeout(()=>{
                // 这里可跳转指定的404页面
                router.push({
                    name:'class'
                })
            },1000)
        }
    }
    console.log('接口响应失败');
    return Promise.reject(err);
})

// 暴露实例
export default axiosConfig;

url常量

// 文件设置URL常量

export default {
    GITHUB_URL : 'https://api.github.com/search/users',

    GET_USERS : 'https://api.github.com/search'
}

接口配置

import axiosConfig from "./apiConfig";
import URL from './url'

export default {
    // get请求
    githubUsers(test){
        let url = URL.GITHUB_URL + `?q=${test}`
        return axiosConfig.get(
            url
        )
    },
    // post请求
    getUsers(params){
        return axiosConfig.post(
            URL.GET_USERS,
            params,
        )
    }
}

使用接口

<template>
    <div>
        这是学生组件：所在班级{{$store.state.classOptions.className}}
    </div>
</template>

<script>
// import axios from "axios";
import API from '@/api/myAxios'
export default {
    name: 'StudentList',
    mounted(){
        API.githubUsers('test').then(res => {
            console.log('接口响应成功返回数据')
            console.log(res.items)
        },err => {
            console.log('接口响应失败返回数据')
            console.log(err)
        })
    }
}
</script>

<style  lang="less">

</style>

接口也可这样：

import axiosConfig from "./apiConfig";
import URL from './url'
...
githubUsers(params){
    let url = URL.GITHUB_URL
    return axiosConfig.get(url,{
        params,
    })
}
...

使用时：

import API from '@/api/myAxios'
...
API.githubUsers({q:'test'}).then(res => {
    console.log('接口响应成功返回数据')
    console.log(res.items)
},err => {
    console.log('接口响应失败返回数据')
    console.log(err)
})
...

Axios 简单介绍