持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

介绍

Axios，是一个基于promise()的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

选择什么网络模块

Vue中发送网络请求的方式有很多种：

一、ajax

缺点：配置和调用方式非常混乱，不完善

二、jQuery-ajax

缺点：在vue的整个开发中都不需要用到jquery，jquery的代码1w+行，vue的代码也才1w+行

三、vue-resource

缺点：不再继续更新和维护了

四、axios

优点：vue作者（尤雨溪）推荐，可以在浏览器中发送XML请求，node.js中发送http请求，支持PromiseAPI，拦截请求和响应等等

axios请求方式

axios支持多种请求方式：

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]])

axios的基本使用

安装npm install axios --save

main.js导入import axios from 'axios'

axios使用方法1:

axios({
    url:'https://lianghj.top:3000/song/url?id=1989103128',//请求地址,?后面跟query参数
    method:'get'//请求方式，不写默认get请求方式
}).then(res=>{
    console.log(res)//打印请求数据
})

axios使用方法1:

axios.get({
        url:'https://lianghj.top:3000/song/url?id=1989103128',//请求地址,?后面跟query参数
}).then(res=>{
    console.log(res)//打印请求数据
})

axios发送多个并发请求

axios.all用于发送多个并发请求，返回的结果为一个数组，存放每一个请求的数据

axios.all([axios({
    url:'https://lianghj.top:3000/song/url?id=1989103128',
}),axios({
    url:'https://lianghj.top:3000/song/url?id=1989103128',
})]).then(res=>{
    console.log(res)
})

axios全局配置

在开发过程中，很多参数都是固定的，上面的请求示例中可以看得出https://lianghj.top这个是固定的，后面接请求的地址，我们可以将一些公共的进行抽取，也可以利用axios的全局配置

axios.defaults.baseURL='https://lianghj.top' //公共地址
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded' //请求头
timeout:5000//超时时间

axios的全局配置可以带来很大方便，到时候封装的时候就不用每次请求都带baseURL,timeout这些参数了，或者baseURL更改了只要修改一条就行了不用每个请求都去作出修改

axios封装

如果不对axios进行封装那么一旦请求多了代码会变得繁琐，例如一个页面有50个请求，每次都axios({url:'https://lianghj.top/xxxxxxxxxxxx'}),一旦 https://lianghj.top 这个服务器名字换了，那50个请求都要一个一个去改，这在开发中是不好的，所以我们要去封装起来，哪怕服务器名字换了我们只要修改一次就行了

创建一个js文件

export function request(config,success,fail) {
    return new Promise(resolve,reject)=>{
        const instance=axios.create({//创建axios实例
            baseURL:'xxxxxxxxxxxx',
            timeout:5000
        })
        instance(config)
        .then(res=>{
            resolve(res)
        })
        .catch(err=>{
            reject(err)
        })
    }
}

//调用
import {request} from '封装好的axios模块路径'

requesr({
    url:'/song/url?id=1989103128'
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

axios拦截器

axios拦截器是什么，对于某些请求我们想要进行一个拦截，用于拼接一些东西或者判断有没有携带一些东西之类的，这时候就用到的axios的拦截器进行对应的处理

如何使用拦截器?

//配置请求拦截和响应拦截
axios实例.interceptors.request.use(config=>{
    console.log('请求拦截成功')
    //例如每次请求之前都要携带token，保证拥有获取数据的权限
    config.headers.Authorization=window.sessionStorage.getItem('token')
    return config
},err=>{
    console.log('请求拦截失败')
    return err
})

axios实例.interceptors.response.use(response=>{
    console.log('响应拦截成功')
    return response.data
},err=>{
    console.log('响应拦截失败')
    return err
})

怎么将拦截器添加到刚刚封装好的js文件?

export function request(config,success,fail) {
    const instance=axios.create({//创建axios实例
        baseURL:'xxxxxxxxxxxx',
        timeout:5000
    })
    //请求拦截
    instance.interceptors.request.use(config=>{
        console.log('请求拦截成功')
        return config
    },err=>{
        console.log('请求拦截失败')
        return err
    })
    //响应拦截
    instance.interceptors.response.use(response=>{
        console.log('响应拦截成功')
        return response.data
    },err=>{
        console.log('响应拦截失败')
        return err
    })
    //发送真正的网络请求
    return instance(config)
}

vue中网络请求axios的使用和封装

介绍