如何在vue中使用axios和promise

如何在vue中使用axios和promise？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

axios它是基于promise的http庫(kù)，可運(yùn)行在瀏覽器端和node.js中,然后作者尤雨溪也是果斷放棄了對(duì)其官方庫(kù)vue-resource的維護(hù)，直接推薦axios庫(kù)，小編我也是從vue-resource轉(zhuǎn)換過來的，差別說不來，我們講一下axios在實(shí)際開發(fā)中的用法

axios特點(diǎn)

1.從瀏覽器中創(chuàng)建 XMLHttpRequests
2.從 node.js 創(chuàng)建 http 請(qǐng)求
3.支持 Promise API
4.攔截請(qǐng)求和響應(yīng) （就是有interceptor）
5.轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
6.取消請(qǐng)求
7.自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
8.客戶端支持防御 XSRF

安裝axios和qs

npm i axios --save
npm i qs--save

創(chuàng)建項(xiàng)公共模塊API

我是用vue-cli創(chuàng)建的項(xiàng)目在src->util->api.js(公共請(qǐng)求模塊js)

引入axios和qs

import axios from 'axios'

有時(shí)候向后端發(fā)送數(shù)據(jù)，后端無法接收,考慮使用qs模塊

import qs from 'qs'

判定開發(fā)模式

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';

}

全局設(shè)置頭部信息

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

全局設(shè)置超時(shí)時(shí)間

axios.defaults.timeout = 10000;

請(qǐng)求路由攔截

在請(qǐng)求發(fā)出去之前，可以做一些判斷，看是否是合法用戶

axios.interceptors.request.use(function (config) {
  // 一般在這個(gè)位置判斷token是否存在
  return config;
  }, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error);
});

響應(yīng)攔截

axios.interceptors.response.use(function (response){
   // 處理響應(yīng)數(shù)據(jù)
  if (response.status === 200) {      
    return Promise.resolve(response);    
  } else {      
    return Promise.reject(response);    
  }
  }, function (error){
  // 處理響應(yīng)失敗
  return Promise.reject(error);
});

封裝請(qǐng)求方法

使用ES6模塊化export導(dǎo)出import導(dǎo)入

在ES6前， 前端就使用RequireJS或者seaJS實(shí)現(xiàn)模塊化， requireJS是基于AMD規(guī)范的模塊化庫(kù)， 而像seaJS是基于CMD規(guī)范的模塊化庫(kù)， 兩者都是為了為了推廣前端模塊化的工具，現(xiàn)在ES6自帶了模塊化，不過現(xiàn)代瀏覽器對(duì)模塊(module)支持程度不同， 需要使用babelJS， 或者Traceur把ES6代碼轉(zhuǎn)化為兼容ES5版本的js代碼;

get請(qǐng)求

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請(qǐng)求

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

實(shí)際使用

在main.js中引入js

import {get,post} from './utils/api'
//將方法掛載到Vue原型上
Vue.prototype.get = get;
Vue.prototype.post = post;

配置請(qǐng)求環(huán)境

這里通過devServer請(qǐng)求代理

當(dāng)在請(qǐng)求過程中有/api字符串會(huì)自動(dòng)轉(zhuǎn)換為目標(biāo)服務(wù)器地址(target)

devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,
  stats: { colors: true },
  proxy: {
   //匹配代理的url
   '/api': {
     // 目標(biāo)服務(wù)器地址
       target: 'http://v.juhe.cn',
       //路徑重寫
       pathRewrite: {'^/api' : ''},
       changeOrigin: true,
       secure: false,
      }
   },
  disableHostCheck:true
  }

這是請(qǐng)求聚合數(shù)據(jù)的接口為列子

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

返回?cái)?shù)據(jù)

使用promise

1.比如用戶想請(qǐng)求url1接口完后再調(diào)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)=>{
      //只有當(dāng)url1請(qǐng)求到數(shù)據(jù)后才會(huì)調(diào)用url2，否則等待
      resolve(res);
    })
    .catch((err)=>{
      console.log(err)
    })
  })

Promise對(duì)象

• Promise有三種狀態(tài)

• pending: 等待中，或者進(jìn)行中，表示還沒有得到結(jié)果

• resolved: 已經(jīng)完成，表示得到了我們想要的結(jié)果，可以繼續(xù)往下執(zhí)行

• rejected: 也表示得到結(jié)果，但是由于結(jié)果并非我們所愿，因此拒絕執(zhí)(用catch捕獲異常)

這三種狀態(tài)不受外界影響，而且狀態(tài)只能從pending改變?yōu)閞esolved或者rejected，并且不可逆(顧名思義承諾的后的東西怎么又能返回呢)。在Promise對(duì)象的構(gòu)造函數(shù)中，將一個(gè)函數(shù)作為第一個(gè)參數(shù)。而這個(gè)函數(shù)，就是用來處理Promise的狀態(tài)變化

這里要注意，不管是then或者catch返回的都是一個(gè)新的Promise實(shí)例！而每個(gè)Primise實(shí)例都有最原始的Pending（進(jìn)行中）到Resolve（已完成），或者Pending（進(jìn)行中）到Reject（已失?。┑倪^程

Promise基本用法

Promise.all()用法

var p = Promise.all([p1, p2, p3]);

all()接受數(shù)組作為參數(shù)。p1,p2,p3都是Promise的實(shí)例對(duì)象，p要變成Resolved狀態(tài)需要p1，p2，p3狀態(tài)都是Resolved，如果p1,p2,p3至少有一個(gè)狀態(tài)是Rejected，p就會(huì)變成Rejected狀態(tài)

Promise.race()用法

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

只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù),p的狀態(tài)就會(huì)改變Resolved狀態(tài)

Promise resolve()用法

Promise.resolve('foo')
// 等價(jià)于
new Promise(resolve => resolve('foo'))

有時(shí)需要將現(xiàn)有對(duì)象轉(zhuǎn)為Promise對(duì)象，Promise.resolve方法就起到這個(gè)作用.

Promise reject()用法

Promise.reject('foo')
// 等價(jià)于
new Promise(reject => reject('foo'))

Promise.reject(reason)方法也會(huì)返回一個(gè)新的 Promise 實(shí)例，該實(shí)例的狀態(tài)為rejected。但是Promise.reject()方法的參數(shù)，會(huì)原封不動(dòng)地作為reject的理由，變成后續(xù)方法的參數(shù)。這一點(diǎn)與Promise.resolve方法不一致。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

看完上述內(nèi)容，你們掌握如何在vue中使用axios和promise的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！