成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue + axios---封裝一個(gè)http請(qǐng)求

Scliang / 1227人閱讀

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

在使用vue開發(fā)時(shí)，官方推薦使用axios來請(qǐng)求接口

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

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

1.安裝axios

npm install axios

2.創(chuàng)建Http.js文件

import axios from "axios"

export default {
    install (Vue) {
    //    install方法，向Vue實(shí)例中添加一個(gè)$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ā)過程中，會(huì)需要設(shè)置一些請(qǐng)求頭，公共參數(shù)等，或者需要對(duì)請(qǐng)求結(jié)果進(jìn)行統(tǒng)一處理（例如錯(cuò)誤處理），這時(shí)候就可以用到axios攔截器

創(chuàng)建interceptor.js文件

import axios from "axios"

let interceptor = ""
export const myInterceptor = interceptor

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

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

5.設(shè)置axios默認(rèn)請(qǐng)求地址

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

雖說幾乎都是使用webpack代理的方式來配置請(qǐng)求地址，但此方式依然有時(shí)會(huì)用到

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/99942.html

相關(guān)文章

  • vue封裝axios基本思路

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

    microcosm1994 評(píng)論0 收藏0

  • Spring Boot + Vue 前后端分離開發(fā)，前端網(wǎng)絡(luò)請(qǐng)求封裝與配置

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

    Ku_Andrew 評(píng)論0 收藏0

  • axios異步請(qǐng)求數(shù)據(jù)的簡(jiǎn)單使用

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

    forsigner 評(píng)論0 收藏0

  • vue axios 簡(jiǎn)單封裝以及思考

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

    phoenixsky 評(píng)論0 收藏0

  • 從0到1使用VUE-CLI3開發(fā)實(shí)戰(zhàn)（四）: Axios封裝

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

    ThinkSNS 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<