介绍
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)}
复制代码
评论