亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Scliang / 1226人閱讀

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

在使用vue開發(fā)時,官方推薦使用axios來請求接口

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

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

1.安裝axios

npm install axios

2.創(chuàng)建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攔截器
在開發(fā)過程中,會需要設置一些請求頭,公共參數(shù)等,或者需要對請求結(jié)果進行統(tǒng)一處理(例如錯誤處理),這時候就可以用到axios攔截器

創(chuàng)建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 
       /*
           具體配置需要根據(jù)實際開發(fā)情況來配置
       */
        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代理的方式來配置請求地址,但此方式依然有時會用到

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/99942.html

相關(guān)文章

  • vue封裝axios基本思路

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

    microcosm1994 評論0 收藏0
  • Spring Boot + Vue 前后端分離開發(fā),前端網(wǎng)絡請求封裝與配置

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

    Ku_Andrew 評論0 收藏0
  • axios異步請求數(shù)據(jù)的簡單使用

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

    forsigner 評論0 收藏0
  • vue axios 簡單封裝以及思考

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

    phoenixsky 評論0 收藏0
  • 從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(四): Axios封裝

    摘要:從到使用開發(fā)實戰(zhàn)四封裝有很多同學看了本系列的前幾篇之后建議我暫時先不用,于是小肆之后將把換成繼續(xù)下面的文章。前置閱讀用從到做一個完整功能手機站一從到開發(fā)實戰(zhàn)手機站二提交規(guī)范配置從到使用開發(fā)實戰(zhàn)三知識儲備 從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(四): Axios封裝 有很多同學看了本系列的前幾篇之后建議我暫時先不用TS,于是小肆之后將把TS換成JS繼續(xù)下面的文章。今天給大家?guī)眄椖恐蟹浅?..

    ThinkSNS 評論0 收藏0

發(fā)表評論

0條評論

Scliang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<