Vue項(xiàng)目API接口封裝的超詳細(xì)解答
前言
我們?cè)陂_發(fā)的過程中,時(shí)常需要去訪問服務(wù)器,然而每個(gè)請(qǐng)求都需要重新去axios訪問,過于麻煩,所以我們?cè)谶@封裝了一個(gè)進(jìn)行請(qǐng)求的方法,并且將接口api化,需要使用時(shí)直接引入api方法,使用起來非常的簡(jiǎn)單。
一、axios是什么?
axios 是一個(gè)基于Promise 的 HTTP 庫(kù),可以用在瀏覽器和 node.js 中。
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,本質(zhì)上也是對(duì)原生XHR的封裝,只不過它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范,有以下特點(diǎn):
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防御 XSRF
二、API接口封裝步驟
1.創(chuàng)建攔截器(Interceptor.js)
代碼如下(示例):
import axios from "axios";//原生的axios //用來攔截用的 axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8"; //創(chuàng)建一個(gè)單例 const http= axios.create({ baseURL:'接口的前半部分加端口', timeout:5000,//響應(yīng)時(shí)間 // headers:{"Content-Type":"application/json;charset=utf-8"}, }) //攔截器 -請(qǐng)求攔截 http.interceptors.request.use(config=>{ //部分接口需要token let token=localStorage.getItem('token'); if(token){ config.headers.token=token; // config.headers ={ // 'token':token // } } return config; },err=>{ return Promise.reject(err) }) //攔截器 -響應(yīng)攔截 http.interceptors.response.use(res=>{ if(res.data.code===2000){ return Promise.resolve(res.data) //這里讀者們可以根據(jù)服務(wù)器返回的數(shù)據(jù)去自行修改 }else{ return Promise.reject(res.data) } },err=>{ return Promise.reject(err) }); //整體導(dǎo)出 export default http;
2.創(chuàng)建存放API的文件(http.js)
代碼如下(示例):
//將攔截器整體導(dǎo)入 import request from '@/Interceptor.js'//導(dǎo)入已經(jīng)寫好的攔截器 // 封裝所有的API接口 export function Login(params){ console.log(params) return request({ url:'/administrator/login', method :'post', params:params, }) } export function getRoles(params={}){ return request({ url:'/Roles/select', method :'post', params:params, }) }
3.使用方法
代碼如下(示例):
import { Login } from "@/api/http.js" //按需要去引入方法 Login(Requestparameters).then((res) => { if (res.code === 2000) { this.$message({ message: '登錄成功!', type: 'success', duration: 1500 }); setTimeout(() => { let token= res.data.token; localStorage.setItem("token",token); //有需要存token的就可以在這里存儲(chǔ)了 this.$router.push('/index'); //這里就可以轉(zhuǎn)到指定的路由 }, 1550); } else { this.$message({ type: 'info', message: res.message, duration: 1500 }); } }).catch((err) => { console.log(err) })
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目API接口封裝的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目API接口封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)
這篇文章主要為大家介紹了網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2021-11-11vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時(shí)間了,也算對(duì)其雙向綁定原理也有了解個(gè)大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下2022-03-03vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式
這篇文章主要介紹了vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04