vue+axios+promise实际开发用法

小灰灰 2021-09-18 01:46 371阅读 0赞

> 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)
        })

**返回数据**

![图片描述][bVbh9lA_w_918_h_245]

**使用promise**  
1.比如用户想请求url1接口完后再调url2接口

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

原文链接 :  [https://segmentfault.com/a/1190000016680014][https_segmentfault.com_a_1190000016680014]

[bVbh9lA_w_918_h_245]: /images/20210726/a8324f23922844d2bb8f0e173cb259d7.png
[https_segmentfault.com_a_1190000016680014]: https://segmentfault.com/a/1190000016680014