一、簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

• 從瀏覽器中創(chuàng)建 XMLHttpRequest

• 從 node.js 發(fā)出 http 請求

• 支持 Promise API

• 攔截請求和響應

• 轉換請求和響應數據

• 取消請求

• 自動轉換JSON數據

• 客戶端支持防止 CSRF/XSRF

二、安裝

使用npm

//安裝 npm install axios --save ? //導入 import axios from "axios"

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、axios返回的數據

• config 請求的時候附帶的配置參數

• data 后端返回的數據

• headers 請求頭 里面包含發(fā)送給后端的格式 application/json;charset=UTF-8

• request ajax請求

• status 返回的狀態(tài)碼

• statusText 返回的狀態(tài)文字

四、使用axios請求數據

（1）發(fā)送GET不帶參數請求

import axios from "axios"; export default {methods: {init(){axios.get('http://www.bufantec.com/api/douban/movie/in_theaters').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}},created () {this.init();} }

（2）get帶參數請求

import axios from "axios"; export default {methods: {init(){axios.get('http://www.bufantec.com/api/douban/movie/in_theaters?start=1&limit=10')// get請求附帶參數的另一種寫法/* axios.get('http://www.bufantec.com/api/douban/movie/in_theaters',{params:{start:2,limit:10}}) */.then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}},created () {this.init();} }

?

（3）post請求

axios.post('http://order.gjw.com/Order_Api/GetValiCode').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

（4）post 帶參數請求

axios.post('http://order.gjw.com/Order_Api/GetValiCode',{Mob:18311111111,validcode:"815961",use:"regiVali"} ).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

五、axios執(zhí)行多個并發(fā)請求

一次執(zhí)行多次ajax請求 promise.all 執(zhí)行多個并發(fā)請求是通過axios.all完成

axios.all([function , function , ...])

baseGet(){//axios.get("url",參數).then(返回的信息)return axios.get('http://bufantec.com/api/douban/movie/in_theaters')}, basePost(){return axios.post('http://bufantec.com/api/test/user/fileList') }, getAll(){axios.all([this.baseGet(),this.basePost()]).then(res=>{console.log(res);}) }

請求完成之后 會以數組的形式返回全部的請求數據

六、全局的 axios 默認值

• axios.defaults.baseURL 設置默認公共請求地址baseURL

  當我們的項目里面有很多的接口時 設置默認baseURL對后期的維護很有必要

  例如 開發(fā)環(huán)境訪問的是開發(fā)時的數據庫 生產環(huán)境訪問的是線上數據庫 開發(fā)和生產訪問的不是一個地址

  在請求的時候自動的在地址前面加上設置的baseUrl

  (開發(fā)環(huán)境是本地開發(fā)時的環(huán)境 生產環(huán)境是打包之后的環(huán)境)

<script>axios.defaults.baseURL = 'http://localhost:3000'; </script>

七、設置超時時間

• axios.defaults.timeout = 2500; 設置超時

  當后端返回數據過慢時設置了超時就會自動斷開請求

<script> import axios from "axios"; axios.defaults.timeout = 3000; </script> ?

八、設置請求頭

token是登陸的時候返回的token 如果后端讓在別的頁面請求數據的是附帶token

一般用戶判斷用戶是否登陸是根據token 進行判斷的 一般把這個token存在session里面

只要把toke寫在請求頭里面 后端就知道我們登陸

axios.defaults.headers.common['token'] = localStorage["token"] //or //config.headers.Authorization = window.sessionStorage.getItem('token');

登陸的時候保存sessionkey 然后在請求其他接口的時候帶上這個sessionkey sessionkey 代表用戶的身份 當我們請求數據的時候帶上這個sessionkey 那么后端就知道現在是誰在請求數據 還有些特殊的情況 登陸的時候后端會在本地設置cookie token 他會根據cookie里面的值token來判斷用戶是否登陸

axios.defaults.headers.common['sessionKey'] = 登陸時后端返回的sessionKey

如果你每次請求接口需要驗證，就加這個，不需要驗證那就不用加

九、axios攔截器 interceptors

頁面發(fā)送http請求，很多情況我們要對請求和其響應進行特定的處理；如果請求數非常多，單獨對每一個請求進行處理會變得非常麻煩，程序的優(yōu)雅性也會大打折扣。好在強大的axios為開發(fā)者提供了這樣一個API：攔截器。攔截器分為 請求（request）攔截器和 響應（response）攔截器。

前端請求接口時首先向服務端發(fā)送請求的接口加參數 這個步驟稱之為request request 對象代表了一個HTTP請求，其具有一些屬性來保存請求中的一些數據，比如params string，body，HTTP headers等等。

• params get請求附帶的參數

• body post請求附帶的參數

• HTTP headers 提交數據類型

服務端接收到請求之后響應數據 這個步驟稱之為response response里面存放的就是服務端返回給我們的數據，包括狀態(tài)碼，返回的數據格式等等

axios攔截器就是對這請求前和返回數據后的這兩個過程執(zhí)行操作

axios攔截器 開始 類似路由守衛(wèi)

+ 請求攔截器

• config里面包含請求的參數 如請求地址 請求類似 請求參數等 在請求的時候執(zhí)行一些操作 比如開啟loading彈窗 可以想象成router的導航守衛(wèi)

<script> axios.interceptors.request.use(function (config) {// 在發(fā)起請求請做一些業(yè)務處理 ?console.log(config);return config; }, function (error) {// 對請求失敗做處理return Promise.reject(error); }); </script> ?

+ 響應攔截器

比如響應數據之后進行的操作

<script> axios.interceptors.response.use(function (config) {// 在請求之后做處理 如關閉loadingloadings.close();// 對返回過來的數據進行過濾操作return config.data; }, function (error) {// 對請求失敗做處理loadings.close();return Promise.reject(error); }); </script>

十、proxy跨域

在vue-cli項目根路徑下新建一個vue.config.js文件：

module.exports={devServer:{proxy:{// "/video":{// target:'https://www.bilibili.com',// changeOrigin:true// }//"/5a1Fazu8AA54nxGko9WTAnF6hhy":{// target:'https://sp0.baidu.com',//changeOrigin:true//}"/ajax":{target:'https://m.maoyan.com', //代理地址changeOrigin:true}}} } ?

然后在組件中發(fā)送請求：

getMove(){axios.get("/ajax/movieOnInfoList?token=&optimus_uuid=91964AE05B9611EB9993CF30142BEF43833191D4364E42FFBA29B34F6B04A0E3&optimus_risk_level=71&optimus_code=10").then(res=>{console.log(res)}) }

十一、axios封裝

(1)我們可以在components文件夾中新建一個文件夾request，然后新建http.js文件，來封裝axios

import axios from 'axios'; import router from '../router/index.js'; //import store from '../store/index'; import { Toast } from 'vant'; ? /** * 提示函數 * 禁止點擊蒙層、顯示一秒后關閉*/ const tip = msg => { ? ?Toast({ ? ? ? ?message: msg, ? ? ? ?duration: 1000, ? ? ? ?forbidClick: true ? ?}); } /** * 跳轉登錄頁* 攜帶當前頁面路由，以期在登錄頁面完成登錄后返回當前頁面*/ // <router-link :to=""></router-link> ? ? const toLogin = () => {router.replace({path: '/login', ? ? ? ?query:{ //$route//$router.currentRoute：當前路由的路由信息對象，包含了當前匹配路由的信息redirect: router.currentRoute.fullPath}}); } ? /** * 請求失敗后的錯誤統(tǒng)一處理 * @param {Number} status 請求失敗的狀態(tài)碼*/ const errorHandle = (status, other) => {// 狀態(tài)碼判斷switch (status) {// 401: 未登錄狀態(tài)，跳轉登錄頁case 401:toLogin();break;// 403 token過期// 清除token并跳轉登錄頁case 403:tip('登錄過期，請重新登錄');localStorage.removeItem('token');// store.commit('loginSuccess', null);setTimeout(() => {toLogin();}, 1000);break;// 404請求不存在case 404:tip('請求的資源不存在'); break;default:console.log(other); ? }} ? // 創(chuàng)建axios實例 var instance = axios.create({ timeout: 1000 * 12}); // 設置post請求頭 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; /** * 請求攔截器 * 每次請求前，如果存在token則在請求頭中攜帶token */ instance.interceptors.request.use( ? ?config => { ? ? ? ?// 登錄流程控制中，根據本地是否存在token判斷用戶的登錄情況 ? ? ? ?// 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token ? ? ? ?// 后臺根據攜帶的token判斷用戶的登錄情況，并返回給我們對應的狀態(tài)碼 ? ? ? ?// 而后我們可以在響應攔截器中，根據狀態(tài)碼進行一些統(tǒng)一的操作。 ? ? ? ?// const token =// store.state.token; ? const token =localStorage.getItem("token")token && (config.headers.Authorization = token); ? ? ? ?return config; ? ?}, ? ?error => Promise.error(error)) ? // 響應攔截器 instance.interceptors.response.use( ? ?// 請求成功res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), ? ?// 請求失敗error => {const { response } = error;if (response) {// 請求已發(fā)出，但是不在2xx的范圍 errorHandle(response.status, response.data.message);return Promise.reject(response);} else {// 處理斷網的情況// eg:請求超時或斷網時，更新state的network狀態(tài)// network狀態(tài)在app.vue中控制著一個全局的斷網提示組件的顯示隱藏// 關于斷網組件中的刷新重新獲取數據，會在斷網組件中說明// store.commit('changeNetwork', false);//服務器連結果都沒有返回//返回瀏覽器的聯網狀態(tài)。正常聯網（在線）返回 true，不正常聯網（離線）返回 falseif(!window.navigator.onLine){return; ? }router.push("/err")return Promise.reject(error);}} );export default instance;

（2）在新建一個base.js文件，放置基礎地址（公共地址）.有的大型項目基礎地址baseURL不止一個。

/*** 接口地址的管理* 基礎地址管理* 一個網站有可能有多個基礎公共地址* */ const base = { ? ?//sq: 'https://xxxx111111.com/api/v1', ? ?//bd: 'http://xxxxx22222.com/api'bufan:'http://bufantec.com/api',zhubaba:'https://api.zhubaba.cn/user' } ? export default base;

（3）新建一個bufan.js文件放置不凡系列接口

/***不凡豆瓣電影接口系列* move模塊接口列表*/ ? import base from './base.js'; // 導入公共請求頭接口域名列表 import axios from './http.js'; // 導入http中創(chuàng)建的axios實例 import qs from 'qs'; // 根據需求是否導入qs模塊 ? const move = { ? ?//電影250接口列表 ? ?move(params) { ? ? ? ?return axios.get(`${base.bufan}/douban/movie/top250`,{params}); ? ?}, ? ?// 電影詳情列表 ? ?moveDetail (id) { ? ? ? ?return axios.get(`${base.bufan}/douban/movie/subject`,{id}); ? ?},// 登錄接口 ? ?login(params) { ? ? ? ?// return axios.post(`${base.sq}/accesstoken`, qs.stringify(params)); ? ?},//獲取圖片接口列表postgetPicAPI(params){return axios.post(`${base.bufan}/test/user/fileList`, qs.stringify(params))}// 其他接口………… } ? export default move

（4）新建一個zhubaba.js文件，放置祝爸爸系列接口

//豬爸爸系列相關接口import base from "./base.js";import axios from "./http.js";const zhu={getLogin(params){return axios.post('https://api.zhubaba.cn/user/login',params)},getInfo(){return axios.post('https://api.zhubaba.cn/user/getInfo');}}

（5）目前我們有兩個基礎接口地址，分別是bufan.js和zhubaba.js如果日后有需要可以在加。現在我們把所有接口模塊匯總，放在一個出口文件中。新建exports.js文件

/** * api接口的統(tǒng)一出口*/ // 電影模塊接口 import moveAPI from './bufan.js'; import zhuAPI from './zhubaba.js' // 其他模塊的接口…… ? // 導出接口 //export default { ? ?// moveAPI,//zhuAPI// …… //} ? export default {moveAPI,zhuAPI } ?

（6）基本工作準備好了，我們可以使用了。在使用之前我們需要確保項目中有vue-router、vant、vue、axios、qs等第三方包。

接下來新建一個Err.vue組件，用來做斷網處理。然后新建一個任意組件，用來請求我們封裝好的接口

<template><div><h3>不凡電影接口系列</h3><button @click="getmovies">點擊獲取電影top250</button><button @click="getPicList">獲取圖片列表</button></div> </template> ? <script>import allAPI from "../request/exports.js"export default {data(){return {params:{limit:5,start:1}}},methods:{getmovies(){allAPI.moveAPI.move(this.params).then(res=>{console.log(res);})},getPicList(){allAPI.moveAPI.getPicAPI(this.params).then(res=>{console.log(res);})}}} </script> ? <style> </style>

測試ok。axios的封裝方便我們開發(fā)和維護。

總結

以上是生活随笔為你收集整理的axios基础和封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。