原生JS我们通常会用Ajax来向服务端发送请求；但是这种方式步骤太过于繁琐，所以不同的库和框架对其进行了封装，那么在VUE中常见的封装就是vue-resource和vue-axios，vue-resource已不再维护官方推荐使用vue-axios；vue-axios是基于promise和vue封装的所以可以使用.then().catch()
在使用服务器请求框架的时候，最好不要在每一个组件页面都使用，把所有请求都放在一个特定的文件夹内，然后每个页面组件再调用，这样方便后期的维护和修改；例如我们可以把axios封装在network文件夹下的request.js文件里：
1.创建一个专门放请求的文件夹network，再创建一个放axios的文件request.js；安装vue-axios：npm install vue-axios -save
2.request.js 引入axios，创建axios实例，然后输出再创建axios实例方法
|
1 2 3 4 5 6 7 8 |
import axios from 'axios'//引入axios export function request(config){//输出request函数 let myaxios = axios.create({//创建自定义axios实例 baseURL:'http://123.207.32.32:8000' ,timeout:5000 }); return myaxios(config)//直接返回实例,这个实力本身就是一个priomise所以可以在其他地方调用的时候直接使用.then().catch() } |
3.在需要用的文件内引入创建的文件的模块，然后再传入相关的配置
|
1 2 3 4 5 6 |
//在需要的文件引用自定义的请求 import {request} from './network/request' //在需要的地方调用自定义的请求，配置相关信息拿到数据 request({ url:'home/data' }).then(res=>console.log(res)).catch(rej=>console.log(rej)) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//axios基本使用 axios({ url:'http://123.207.32.32:8000/home/multidata' method:'get' //不设置method默认就是get ,params:{//针对的是get请求的参数拼接 type:'pop' ,page:1 } }).then(res=>log(res)).catch(rej=>log(rej)); //2.并发请求axios.all([])返回的是一个数组;axios.spread()可以将[res1,res2]展开为res1,res2 axios.all([ axios({ url:'http://123.207.32.32:8000/category' }) ,axios({ url:'http://123.207.32.32:8000/home/data' ,params:{ type:"sell" ,page:5 } }) ]).then(axios.spread( (res1,res2)=>{ log(res1); log(res2) } )).catch(rej=>log(rej)) |
'https://some-domain.com/api/'{'X-Requested-With': 'XMLHttpRequest'}{ ID: 12345}{ firstName: 'Fred'}Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization头； {username: 'janedoe',password: 's00pers3cret' }Proxy-Authorization 头，覆写掉已有的通过使用 header 设置的自定义 Proxy-Authorization 头；{host: '127.0.0.1',port: 9000,auth: {username: 'mikeymike',password: 'rapunz3l'}}new CancelToken(function (cancel) {}) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//配置公共信息 let myaxios=axios.create({ baseURL:'http://123.207.32.32:8000' ,timeout:5000 }); myaxios({ url:'/home/multidata' }).then(res=>log(res)) myaxios({ url:'/home/data' ,params:{ type:'pop' ,page:1 } }).then(res=>log(res)) |
axios.interceptors.request.use(function () {/*...*/})；作用：axios.interceptors.response.use(function () {/*...*/}) ；作用：将数据处理后直接返回想要的数据axios.interceptors.request.eject(拦截器)|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
let myaxios = axios.create({//创建自定义axios baseURL:'http://123.207.32.32:8000' ,timeout:5000 }); //请求拦截器(在实例return之前使用) myaxios.interceptors.request.use( suce=>{ console.log(suce); return suce;//这里拦截的一定要return出去要不然后边就拿不到了 }, err=>{ console.log(err) } ); //响应拦截器 myaxios.interceptors.response.use( res=>{ console.log(res.data); return res.data;//这里拦截的也一定要return出去,可以直接返回所需要的data }, err=>{ console.log(err) } ); |