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

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方法不一致。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。