vue+axios+promise实际开发用法详解
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
|
1 2 |
npm i axios --save npm i qs--save |
创建项公共模块API
我是用vue-cli创建的项目在src->util->api.js(公共请求模块js)
引入axios和qs
|
1 |
import axios from 'axios' |
有时候向后端发送数据，后端无法接收,考虑使用qs模块
|
1 |
import qs from 'qs' |
判定开发模式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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' ;
} |
全局设置头部信息
|
1 |
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=UTF-8' ; |
全局设置超时时间
|
1 |
axios.defaults.timeout = 10000; |
请求路由拦截
在请求发出去之前，可以做一些判断，看是否是合法用户
|
1 2 3 4 5 6 7 |
axios.interceptors.request.use( function (config) {
// 一般在这个位置判断token是否存在 return config; }, function (error) {
// 对请求错误做些什么 return Promise.reject(error); }); |
响应拦截
|
1 2 3 4 5 6 7 8 9 10 11 |
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请求
|
1 2 3 4 5 6 7 8 9 10 11 |
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请求
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 |
import {get,post}from './utils/api' //将方法挂载到Vue原型上 Vue.prototype.get = get; Vue.prototype.post = post; |
配置请求环境
这里通过devServer请求代理
当在请求过程中有/api字符串会自动转换为目标服务器地址(target)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 } |
这是请求聚合数据的接口为列子
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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接口
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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捕获异常)
这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中，将一个函数作为第一个参数。而这个函数，就是用来处理Promise的状态变化
这里要注意，不管是then或者catch返回的都是一个新的Promise实例！而每个Primise实例都有最原始的Pending（进行中）到Resolve（已完成），或者Pending（进行中）到Reject（已失败）的过程
Promise基本用法
Promise.all()用法
|
1 |
var p =Promise.all([p1, p2, p3]); |
all()接受数组作为参数。p1,p2,p3都是Promise的实例对象，p要变成Resolved状态需要p1，p2，p3状态都是Resolved，如果p1,p2,p3至少有一个状态是Rejected，p就会变成Rejected状态
Promise.race()用法
|
1 |
var p = new Promise( [p1,p2,p3] ) |
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数,p的状态就会改变Resolved状态
Promise resolve()用法
|
1 2 3 |
Promise.resolve( 'foo' ) // 等价于 new Promise(resolve => resolve( 'foo' )) |
有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用.
Promise reject()用法
|
1 2 3 |
Promise.reject( 'foo' ) // 等价于 new Promise(reject => reject( 'foo' )) |
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。但是Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。
- vue+axios+promise实际开发用法详解
- Vue2.0学习——axios用法详解2引入本地json数据(axios和vue-axios)
- vue-cli中使用微信JS-SDK开发(axios+promise封装)
- Android开发——DiskLruCache用法详解以及工作原理深度解析
- vue+webpack实现异步加载三种用法示例详解
- 详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
- Android开发之recycleView详解代码，看完包你熟练掌握recycleView的用法。转自网络经典文章
- 详解Vue中watch的高级用法
- android开发之interpolator的用法详解
- Node.js开发入门—Buffer用法详解
- Vue.js 插件开发详解
- Android游戏开发教程之三：View类用法详解
- VueJs探索之watch用法详解
- Vue.js实战之使用Vuex + axios发送请求详解
- 细说php常量-常量易错点-实际开发中常量用法
- Vue项目axios在IE浏览器报promise错误的解决办法
- vue2.0之axios使用详解
- PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
- 【C语言】实际项目开发过程中常用C语言函数的9大用法
- 使用Vue开发自己的Chrome扩展程序过程详解