vue+axios+promise实际开发用法

一、axios的介绍

axios 是由 promise 封装的一个 http 的库。
promise是 es6 为解决异步编程的。

什么是异步？

不会按照浏览器的加载方式由上到下。
前端哪里面有异步？
回调函数
定时器
事件绑定
ajax

二、列举一个例子

针对这个例子会出现层层回调函数的嵌套我们称为(回调地狱)
这样很不好对我们后期的维护也很麻烦，所以出现了 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

一、promise是如何产生的

promise并不是一个新的功能，它是一个类，它只是对异步编程的代码进行整合，它是解决异步(层层嵌套的这种关系)，让你的代码看起来更简洁。
在 es6 中 promise是一个类(构造函数)，使用它需要 new 实例。

注意：

在 es5 里类和构造函数是一个意思，在es6中类是类，构造函数是构造函数

只要创建一个 promise 实例的时候都处于 pending (进行中)状态。
promise 构造函数接受一个函数作为参数，该参数的两个参数分别是 resolve 和 rejected，当你成功调用 resolve 当你失败调用 rejected。

promise 的使用方法：

then 是成功的，catch是失败的，
第一个函数是成功函数，第二个是失败函数，
成功函数来自 resolve()，
失败函数来自于 reject()，
p1 是在内存中存放着，如果我想使用它，就需要通过点操作符去使用，
then 如果里面有两个函数，第一个是成功，第二个是失败，如果有一个函数就是成功函数，

安装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捕获异常)

这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中，将一个函数作为第一个参数。而这个函数，就是用来处理Promise的状态变化

这里要注意，不管是then或者catch返回的都是一个新的Promise实例！而每个Primise实例都有最原始的Pending（进行中）到Resolve（已完成），或者Pending（进行中）到Reject（已失败）的过程

Promise基本用法

Promise.all()用法

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()用法

var p = new Promise( [p1,p2,p3] )

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数,p的状态就会改变Resolved状态

Promise resolve()用法

Promise.resolve('foo')

// 等价于

new Promise(resolve => resolve('foo'))

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用.

Promise reject()用法

Promise.reject('foo')

// 等价于

new Promise(reject => reject('foo'))

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。但是Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。