一、文檔鏈接

axios文檔
vue開發插件

二、axios 簡介

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

從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 CSRF/XSRF

三、Vue項目中使用axios（方式一）—— 開發插件

注意：axios是一個庫，并不是vue中的第三方插件，使用時不能通過Vue.use()安裝插件，需要在原型上進行綁定：

1. 安裝axios

npm install axios

2. 新建 src/plugins/http.js

import axios from 'axios' const MyHttpServer = {} MyHttpServer.install = (Vue) => {// 配置接口基準地址axios.defaults.baseURL = 'http://47.***.***.7:8888/api/private/v1/'// 添加請求攔截器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

根據vue開發插件的文檔，
Vue.use方法會尋找插件上的install方法，并且執行，如果插件沒有install方法的話，就會報錯，無法使用use來注冊插件。因此，Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象:

MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或屬性Vue.myGlobalMethod = function () {// 邏輯...}

②攔截器

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

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

③路由-導航守衛

先上官方文檔導航守衛

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

每個守衛方法接收三個參數：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。

④將axios綁定到vue原型上

Vue.prototype.$http = axios

⑤導出對象

export default MyHttpServer

⑥導入、使用

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

引入模塊可能有一個export default（無論它是對象，函數，類等）可用。然后可以使用import語句來導入這樣的默認接口。

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

四、Vue項目中使用axios（方式二）—— 使用vue-axios

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

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

用法：

總結

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

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