<del id="oyaqg"></del>

<strike id="oyaqg"></strike>

vue + axios---封裝一個http請求

Scliang 發布于2019-08-23 14:01 / 1190人閱讀

摘要：在使用開發時，官方推薦使用來請求接口官方地址但是并不像一樣擁有，即不能直接來使用，所以需要我們自己根據來寫一個具有方法的庫。

在使用vue開發時，官方推薦使用axios來請求接口

//    axios官方地址
https://github.com/axios/axios

但是axios并不像 vue-resource 一樣擁有install，即不能直接 Vue.use(axios) 來使用，所以需要我們自己根據axios來寫一個具有install方法的Http庫。

1.安裝axios

npm install axios

2.創建Http.js文件

import axios from "axios"

export default {
    install (Vue) {
    //    install方法，向Vue實例中添加一個$http方法
        Vue.prototype.$http = axios
        Vue.$http = axios
    },
    $http: axios
}

export const Http = axios

3.引用

import Vue from "vue"
import Http from "./Http"

Vue.use(http)

如此，就可以在vue中直接使用axios了

4.axios攔截器
在開發過程中，會需要設置一些請求頭，公共參數等，或者需要對請求結果進行統一處理（例如錯誤處理），這時候就可以用到axios攔截器

創建interceptor.js文件

import axios from "axios"

let interceptor = ""
export const myInterceptor = interceptor

//    設置請求攔截器
export const setInterceptor = function (response) {
    axios.interceptors.request.use((config) => {
        config.headers.Authorization = token    //設置請求頭Authorization
        config.headers.Accept = "application/json"    //設置請求頭Accept 
       /*
           具體配置需要根據實際開發情況來配置
       */
        return config
    })
}
//    移除請求攔截器
export const clearInterceptor = function () {
  axios.interceptors.request.eject(myInterceptor)
}

ps：上例只示范了axios的請求攔截，回復攔截時同樣的處理方式
ps：在interceptor中暴露myInterceptor、setInterceptor與clearInterceptor 的原因是方便隨時取消與設置

5.設置axios默認請求地址

axios.defaults.baseURL = "http://172.0.0.1"

雖說幾乎都是使用webpack代理的方式來配置請求地址，但此方式依然有時會用到

云服務器 GPU云服務器 http請求 js ajax 請求數據封裝發送http請求 http接口請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99942.html

vue封裝axios基本思路

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在vue項目之中使用axios是一個非常明智的選擇，因為vue官方已經宣稱不再維護vue-resource,并且推薦使用axios. 1 為什么選擇axios？使用axios可以統一做請求-響應攔截，例如響應時我們將響應信息攔截起來，判斷狀態碼，從而彈出報錯信息設定請求超時,例如3000ms未響應...

microcosm1994 2019-08-26 12:10 評論0 收藏0
Spring Boot + Vue 前后端分離開發，前端網絡請求封裝與配置

摘要：今天松哥就帶大家來看看的使用。此時啟動前端項目，就可以順利發送網絡請求了。松哥將自己封裝的網絡請求庫已經放在上，歡迎大家參考。前端網絡訪問，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，網絡訪問較多的采用 vue-resources，Vue2.0 之后，官方不再建議使用 vue-resources ，這個項目本身也停止維護，目前建議使用的方案是 axios。今天松哥就帶大...

Ku_Andrew 2019-05-23 11:48 評論0 收藏0
axios異步請求數據的簡單使用

摘要：使用模擬好后端數據之后模擬數據的使用參考，就需要嘗試請求加載數據了。數據請求選擇了，現在都推薦使用。規定要發送到服務器的數據。布爾值，表示請求是否異步處理。要求為類型的參數，請求成功后調用的回調函數。在一個中重寫回調函數的字符串。使用Mock模擬好后端數據之后（Mock模擬數據的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數據了。數...

forsigner 2019-08-23 14:40 評論0 收藏0
vue axios 簡單封裝以及思考

摘要：先安裝的詳細介紹以及用法就不多說了請移步下面是簡單的封裝一個，在此說明這個方法呢是不一定需要的，根據個人的項目需求吧，也可以直接返回，交給后面另行處理也行。或者根據后端返回的狀態，在里面進行處理也行。先安裝 axios npm install axios axios的詳細介紹以及用法就不多說了請移步 github ??? https://github.com/axios/axios ...

phoenixsky 2019-04-23 13:19 評論0 收藏0
從0到1使用VUE-CLI3開發實戰（四）: Axios封裝

摘要：從到使用開發實戰四封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用，于是小肆之后將把換成繼續下面的文章。前置閱讀用從到做一個完整功能手機站一從到開發實戰手機站二提交規范配置從到使用開發實戰三知識儲備從0到1使用VUE-CLI3開發實戰（四）: Axios封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用TS，于是小肆之后將把TS換成JS繼續下面的文章。今天給大家帶來項目中非常...

ThinkSNS 2019-08-23 14:57 評論0 收藏0