vue-cli專案中的請求資料的與複用請求
場景:
之前剛開始使用vue-cli的時候請求後臺資料是不知道怎麼使用,後來在網上看到說是用 axios ,所以我也用 axios了,在使用過程中可以請求也沒什麼bug所以在這裡推薦給大家,如果是第一次使用麻煩跟著做吧~
安裝:
直接安裝axiox
npm install axios --save
發起請求:
在main.js檔案中引入
import axios from 'axios';//引入檔案
Vue.prototype.$http = axios;//將axios掛載到Vue例項中的$ajax上面,在專案中的任何位置通過this.$http使用
this.$ajax({
url:'/api/articles',//url這裡是你請求後臺的資料的地址,直接把地址解除安裝api中後面的articles是檔案中的物件或者是陣列
method:'get',//請求方式 //這裡可以新增axios文件中的各種配置
}).then(function (res)
{ console.log(res,'成功');
}).catch(function (err)
{ console.log(err,'錯誤');
})
//還可以像下面這麼簡寫
this.$ajax.get('api/publishContent').then((res) => {
console.log(res,'請求成功')
},(err)=>{ console.log(err,'請求失敗');
});
開始封裝:
開始這樣用領導也沒說什麼,後來子啊快都寫完的時候領導說這樣完成了專案之後不好維護,如果地址換了,每個都找,太麻煩,所以要讓我給把這些封裝起來,我這個小暴脾氣,你懂得~在心裡問候一下,所以建議大家還是封裝起來吧,也比較省事,省的自己還得多加班.封裝的是我從網上找的,自己剛學也不會,所以在網上看的
先建立了個資料夾,裡面是三個檔案
下面是檔案裡的內容
api.js:
import { fetch } from "./fetch"; //引用fetch,js
import api from './url'; //引用url.js
//檢視使用者
// export function lookOption(issuer,userId) { //lookOption是你要呼叫介面的名字,issuer,userId是傳進來的引數
// return fetch({
//api.Hallowmas 引用url.js裡面的資料
// url:api.Hallowmas+'helloween'+issuer+'/question',
// method:'get', //請求方法
// params:{
// currentUserId:userId //傳過去的引數
// }
// })
// }
如果還有別的請求地址複製上面的在來一下便可以了~
fetch.js：
import axios from 'axios'; //引入axios
export function fetch(options){
return new Promise((resolve,reject)=>{
const instance = axios.create({//instance建立一個axios例項,可以自定義配置,可在axios文件中檢視詳情
//所有的請求都會帶上這些配置,比如全域性都要用的身份資訊等.
headers:{
'Content-Type': 'appliction/json',
'X-Requested-With': 'xmlhttprequest',
//'token_in_header':"gllobal_.token",//token從全域性變數那裡傳過來
},
timeout:30 * 1000 //30秒超市
});
instance(options)
.then(response => {//then請求成功之後進行實名操作
resolve(response); //把請求到的資料發到引用請求的地方
})
.catch(error => {
console.log('請求異常資訊:' +error);
reject(error);
});
});
}
這個資料夾裡的基本不需要改動~
url.js:
export default {
Hallowmas:'api',
Hallowmas:'http://mobile.qczww.cn/home/data/chapters.json?',//這個是我的例子,後面的引數是我在api資料夾裡給傳過來的
}
在元件裡面使用介面：
在你需要請求資料的頁面裡:
記得username 和phoneNumber 是你傳入的引數
溫馨提示:儘量使用封裝的axios吧,不然就領導讓你封裝,或者是你如果自己改的時候真的也是麻煩事,
小白出品,請大神勿噴~ლ(⌒▽⌒ლ)