一、文檔鏈接

axios文檔
vue開(kāi)發(fā)插件

二、axios 簡(jiǎn)介

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

從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請(qǐng)求
支持 Promise API
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶(hù)端支持防止 CSRF/XSRF

三、Vue項(xiàng)目中使用axios（方式一）—— 開(kāi)發(fā)插件

注意：axios是一個(gè)庫(kù)，并不是vue中的第三方插件，使用時(shí)不能通過(guò)Vue.use()安裝插件，需要在原型上進(jìn)行綁定：

1. 安裝axios

npm install axios

2. 新建 src/plugins/http.js

import axios from 'axios' const MyHttpServer = {} MyHttpServer.install = (Vue) => {// 配置接口基準(zhǔn)地址axios.defaults.baseURL = 'http://47.***.***.7:8888/api/private/v1/'// 添加請(qǐng)求攔截器axios.interceptors.request.use(function (config) {if (config.url !== 'login') {const AUTH_TOKEN = sessionStorage.getItem('token')config.headers.common['Authorization'] = AUTH_TOKEN}return config}, function (error) {return Promise.reject(error)})Vue.prototype.$http = axios } export default MyHttpServer

代碼梳理：

① .install

根據(jù)vue開(kāi)發(fā)插件的文檔，
Vue.use方法會(huì)尋找插件上的install方法，并且執(zhí)行，如果插件沒(méi)有install方法的話，就會(huì)報(bào)錯(cuò)，無(wú)法使用use來(lái)注冊(cè)插件。因此，Vue.js 的插件應(yīng)該暴露一個(gè) install 方法。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象:

MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或?qū)傩訴ue.myGlobalMethod = function () {// 邏輯...}

②攔截器

這里為什么要寫(xiě)攔截器？是根據(jù)接口文檔中“除了登錄請(qǐng)求以外，任意請(qǐng)求都必須在請(qǐng)求頭中使用 Authorization 字段提供 token 令牌”，查詢(xún)axios文檔 axios攔截器

// 添加請(qǐng)求攔截器 axios.interceptors.request.use(function (config) {// 在發(fā)送請(qǐng)求之前做些什么return config;}, function (error) {// 對(duì)請(qǐng)求錯(cuò)誤做些什么return Promise.reject(error);}); 請(qǐng)求配置參數(shù)config 這些是創(chuàng)建請(qǐng)求時(shí)可以用的配置選項(xiàng)。只有 url 是必需的。如果沒(méi)有指定 method，請(qǐng)求將默認(rèn)使用 get 方法。{// `url` 是用于請(qǐng)求的服務(wù)器 URLurl: '/user',// `method` 是創(chuàng)建請(qǐng)求時(shí)使用的方法method: 'get', // default// `baseURL` 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL。// 它可以通過(guò)設(shè)置一個(gè) `baseURL` 便于為 axios 實(shí)例的方法傳遞相對(duì) URLbaseURL: 'https://some-domain.com/api/',// `headers` 是即將被發(fā)送的自定義請(qǐng)求頭headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即將與請(qǐng)求一起發(fā)送的 URL 參數(shù)// 必須是一個(gè)無(wú)格式對(duì)象(plain object)或 URLSearchParams 對(duì)象params: {ID: 12345},// `data` 是作為請(qǐng)求主體被發(fā)送的數(shù)據(jù)// 只適用于這些請(qǐng)求方法 'PUT', 'POST', 和 'PATCH'// 在沒(méi)有設(shè)置 `transformRequest` 時(shí)，必須是以下類(lèi)型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 瀏覽器專(zhuān)屬：FormData, File, Blob// - Node 專(zhuān)屬： Streamdata: {firstName: 'Fred'},

③路由-導(dǎo)航守衛(wèi)

先上官方文檔導(dǎo)航守衛(wèi)

router.beforeEach((to, from, next) => {// 如果用戶(hù)訪問(wèn)的是 登錄頁(yè)面，則直接放行if (to.path === '/login') return next()// 獲取 tokenconst tokenStr = sessionStorage.getItem('token')// 如果 token 存在， 直接放行if (tokenStr) return next()// 否則，強(qiáng)制跳轉(zhuǎn)到登錄頁(yè)next('/login') })

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。

④將axios綁定到vue原型上

Vue.prototype.$http = axios

⑤導(dǎo)出對(duì)象

export default MyHttpServer

⑥導(dǎo)入、使用

> 在main.js中（導(dǎo)入） import http from '@/plugins/http.js'> 在.vue單文件組件中（使用） this.$http.post('login', this.formdata) Vue.use(http) -- 既然自定義了插件就要Vue.use()

引入模塊可能有一個(gè)export default（無(wú)論它是對(duì)象，函數(shù)，類(lèi)等）可用。然后可以使用import語(yǔ)句來(lái)導(dǎo)入這樣的默認(rèn)接口。

最簡(jiǎn)單的用法是直接導(dǎo)入默認(rèn)值：
為了解決導(dǎo)出命名沖突的問(wèn)題，ES6為你提供了重命名的方法解決這個(gè)問(wèn)題。
import 后面是一個(gè)別名，可以和export default導(dǎo)出的名字不同。
待補(bǔ)充

四、Vue項(xiàng)目中使用axios（方式二）—— 使用vue-axios

vue-axios是將axios集成到Vue.js的小包裝器，可以像插件一樣進(jìn)行安裝
`在mian.js中引用axios，vue-axios，通過(guò)全局方法 Vue.use() 使用插件，就相當(dāng)于調(diào)用install方法：

npm install --save axios vue-axios --【安裝】import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

用法：

總結(jié)

以上是生活随笔為你收集整理的Vue学习笔记（二）—— vue项目中使用axios的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。