Vue項目API接口封裝的超詳細解答
前言
我們在開發(fā)的過程中,時常需要去訪問服務器,然而每個請求都需要重新去axios訪問,過于麻煩,所以我們在這封裝了一個進行請求的方法,并且將接口api化,需要使用時直接引入api方法,使用起來非常的簡單。
一、axios是什么?
axios 是一個基于Promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,本質上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,有以下特點:
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據
- 客戶端支持防御 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)建一個單例 const http= axios.create({ baseURL:'接口的前半部分加端口', timeout:5000,//響應時間 // headers:{"Content-Type":"application/json;charset=utf-8"}, }) //攔截器 -請求攔截 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) }) //攔截器 -響應攔截 http.interceptors.response.use(res=>{ if(res.data.code===2000){ return Promise.resolve(res.data) //這里讀者們可以根據服務器返回的數據去自行修改 }else{ return Promise.reject(res.data) } },err=>{ return Promise.reject(err) }); //整體導出 export default http;
2.創(chuàng)建存放API的文件(http.js)
代碼如下(示例):
//將攔截器整體導入 import request from '@/Interceptor.js'//導入已經寫好的攔截器 // 封裝所有的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的就可以在這里存儲了 this.$router.push('/index'); //這里就可以轉到指定的路由 }, 1550); } else { this.$message({ type: 'info', message: res.message, duration: 1500 }); } }).catch((err) => { console.log(err) })
總結
到此這篇關于Vue項目API接口封裝的文章就介紹到這了,更多相關Vue項目API接口封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue?MVVM雙向綁定實例詳解(數據劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時間了,也算對其雙向綁定原理也有了解個大概,這篇文章主要給大家介紹了關于vue?MVVM雙向綁定(數據劫持+發(fā)布者-訂閱者模式)的相關資料,需要的朋友可以參考下2022-03-03