快捷導(dǎo)航

Vue項(xiàng)目API接口封裝的超詳細(xì)解答

更新時(shí)間：2022年09月19日 11:16:17 作者：one.158

在前端vue的開(kāi)發(fā)中,有一點(diǎn)是必須要做的,那就是將所有的API接口封裝起來(lái),因?yàn)閺拈_(kāi)發(fā)到最終上線(xiàn)的過(guò)程中,API是需要經(jīng)常更換的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目API接口封裝的相關(guān)資料,需要的朋友可以參考下

前言

我們?cè)陂_(kāi)發(fā)的過(guò)程中，時(shí)常需要去訪(fǎng)問(wèn)服務(wù)器，然而每個(gè)請(qǐng)求都需要重新去axios訪(fǎng)問(wèn)，過(guò)于麻煩，所以我們?cè)谶@封裝了一個(gè)進(jìn)行請(qǐng)求的方法，并且將接口api化，需要使用時(shí)直接引入api方法,使用起來(lái)非常的簡(jiǎn)單。

一、axios是什么？

axios 是一個(gè)基于Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶(hù)端，本質(zhì)上也是對(duì)原生XHR的封裝，只不過(guò)它是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ù)
客戶(hù)端支持防御 XSRF

二、API接口封裝步驟

1.創(chuàng)建攔截器（Interceptor.js）

代碼如下（示例）：

import axios from "axios";//原生的axios
//用來(lái)攔截用的
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)寫(xiě)好的攔截器
 
// 封裝所有的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)
          })