axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库，小编我也是从vue-resource转换过来的，差别说不来，我们讲一下axios在实际开发中的用法
axios特点
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 （就是有interceptor）
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
安装axios和qs
npm i axios --save npm i qs--save
创建项公共模块API
我是用vue-cli创建的项目在src->util->api.js(公共请求模块js)
引入axios和qs
import axios from 'axios'
有时候向后端发送数据，后端无法接收,考虑使用qs模块
import qs from 'qs'
判定开发模式
if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = '/api'; }else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = 'http://v.juhe.cn'; }else if (process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'http://v.juhe.cn'; }
全局设置头部信息
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
全局设置超时时间
axios.defaults.timeout = 10000;
请求路由拦截
在请求发出去之前，可以做一些判断，看是否是合法用户
axios.interceptors.request.use(function (config) { // 一般在这个位置判断token是否存在 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
响应拦截
axios.interceptors.response.use(function (response){ // 处理响应数据 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, function (error){ // 处理响应失败 return Promise.reject(error); });
封装请求方法
使用ES6模块化export导出import导入
在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库， 而像seaJS是基于CMD规范的模块化库， 两者都是为了为了推广前端模块化的工具，现在ES6自带了模块化，不过现代浏览器对模块(module)支持程度不同， 需要使用babelJS， 或者Traceur把ES6代码转化为兼容ES5版本的js代码;
get请求
export function get(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params }).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) }); }
post请求
export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, qs.stringify(params)) .then(res => { resolve(res.data); }) .catch(err =>{ reject(err.data) }) }); }
实际使用
在main.js中引入js
import {get,post} from './utils/api' //将方法挂载到Vue原型上 Vue.prototype.get = get; Vue.prototype.post = post;
配置请求环境
这里通过devServer请求代理
当在请求过程中有/api字符串会自动转换为目标服务器地址(target)
devServer: { historyApiFallback: true, hot: true, inline: true, stats: { colors: true }, proxy: { //匹配代理的url '/api': { // 目标服务器地址 target: 'http://v.juhe.cn', //路径重写 pathRewrite: {'^/api' : ''}, changeOrigin: true, secure: false, } }, disableHostCheck:true }
这是请求聚合数据的接口为列子
this.get('/toutiao/index?type=top&key=秘钥',{}) .then((res)=>{ if(res.error_code===0){ resolve(res); }else{ //这里抛出的异常被下面的catch所捕获 reject(error); } }) .catch((err)=>{ console.log(err) })
返回数据
使用promise
1.比如用户想请求url1接口完后再调url2接口
var promise = new Promise((resolve,reject)=>{ let url1 = '/toutiao/index?type=top&key=秘钥' this.get(url,{}) .then((res)=>{ resolve(res); }) .catch((err)=>{ console.log(err) }) }); promise.then((res)=>{ let url2 = '/toutiao/index?type=top&key=秘钥' this.get(ur2,{}) .then((res)=>{ //只有当url1请求到数据后才会调用url2，否则等待 resolve(res); }) .catch((err)=>{ console.log(err) }) })
Promise对象
Promise有三种状态
pending: 等待中，或者进行中，表示还没有得到结果
resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行
rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)