axios

目录

一、了解

二、基本使用

三、axios发送并发请求

四、axios的配置信息相关

五、axios的实例和模块封装

六、axios拦截器

---

一、了解

方式一：传统的Ajax是基于XMLHttpRequest（XHR）

但是由于

• 配置和调试方式非常混乱；
• 编码蛋疼

方式二：jQuery-Ajax

相对传统Ajax非常好用，但是

• jQuery的代码1w+行，Vue的代码1W+行，为了在Vue中使用ajax，而引入JQuery，得不偿失。

方式三：Vue-resource

官方在Vue1.x推出Vue-Resource插件，它的体积相对于jQuery小很多，并且是官方推出的，但是

• 在Vue2.x推出后，Vue-Resource已经停止更新，不在维护；
• 因此，Vue-Resource可能出现不支持新版本，也可能出现各种bug；
• 对项目的开发和维护都存在很大隐患；

方式四：axios

特点：

• 在浏览器中发送XMLHttpRequest请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 等等

支持多种请求方式：

• axios（config）
• axios.request（config）
• axios.get（url[,config]）
• axios.delete（url[,config]）
• axios.head（url[,config]）
• axios.post（url[,data[,config]]）
• axios.put（url[,data[,config]]）
• axios.patch（url[,data[,config]]）

 

二、基本使用

http测试接口：http://httpbin.org/#/HTTP_Methods/get_get

安装：

npm install --save axios

配置使用：

import axios from "axios";



axios({
    url:'http://httpbin.org/get',
    method:'get'
}).then((res)=>{
    console.log(res);
})

 

 

三、axios发送并发请求

//axios发送并发请求
axios.all([
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    }),
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    })])
    .then(results => {
        console.log(results);
    })

请求的结果存放在一个数组中

我们也可以使用axios.spread将数组展开

axios.all([
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    }),
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    })])
    .then(axios.spread((res1,res2)=>{
        console.log(res1);
        console.log(res2);
    }))

 

四、axios的配置信息相关

//axios的配置信息相关
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000

axios({
    url:'/get'
}).then(res=>{
    console.log(res);
})

 

五、axios的实例和模块封装

axios实例

//axios的实例和模块封装
const instance_1 = axios.create({
    baseURL:'http://httpbin.org',
    timeout:5000
})

instance_1({
    url:'/get',
    method:'get'
}).then(res=>{
    console.log(res);
})

模块封装：

src/network中的request.js

import axios from "axios";

export function ins(config){
    const instance = axios.create({
        baseURL:'http://httpbin.org',
        timeout:5000
    })
    //发送网络请求，回调
    return instance(config)
}

调用模块：

import {ins} from './network/request'

ins({
    url:'/get',
    method:'get'
}).then(res=>{
    console.log(res);
})

 

六、axios拦截器

请求成功拦截、请求失败拦截

    //拦截请求
    instance.interceptors
        .request
        .use(config => {
            console.log('config', config);
            //1、可能config中的一些信息不符合服务器要求1
            /*if(config.method === 'post') {
                config.data = qs.stringify(config.data);
              }*/
            //2、比如在发送网络请求时显示一个请求的动画
            //3、某些网络请求必须携带一些特殊信（比如token）
            return config
        }, error => {
            console.log('error', error);
            return Promise.reject(error)
        })

响应成功拦截

响应失败拦截

    instance.interceptors
        .response
        .use(res => {
            console.log('res', res);
            /*
            * */
            return res.data
        }, error => {
            console.log('error', error);
            return Promise.reject(error)
        })