vue+axios+promise實際開發用法

axios它是基於promise的http庫，可運行在瀏覽器端和node.js中,而後做者尤雨溪也是果斷放棄了對其官方庫vue-resource的維護，直接推薦axios庫，小編我也是從vue-resource轉換過來的，差異說不來，咱們講一下axios在實際開發中的用法

如何在 Vue.js 中使用第三方庫

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

只要p一、p二、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方法不一致。

原文地址：http://www.javashuo.com/article/p-ezeebnrz-cd.html