欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年09月19日 11:16:17   作者:one.158  
在前端vue的開發(fā)中,有一點(diǎn)是必須要做的,那就是將所有的API接口封裝起來,因?yàn)閺拈_發(fā)到最終上線的過程中,API是需要經(jīng)常更換的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目API接口封裝的相關(guān)資料,需要的朋友可以參考下

前言

我們?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ù)

    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-11
  • vue.js學(xué)習(xí)之遞歸組件

    vue.js學(xué)習(xí)之遞歸組件

    最近學(xué)習(xí)vue.js有一段時(shí)間了,使用vue做了一套后臺(tái)管理系統(tǒng),其中使用最多就是遞歸組件,也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑,所以今天寫出來和大家一起分享。有需要的朋友們可以參考借鑒,下面來一起看看吧。
    2016-12-12
  • 如何使用vue開發(fā)公眾號(hào)網(wǎng)頁

    如何使用vue開發(fā)公眾號(hào)網(wǎng)頁

    因?yàn)轫?xiàng)目需要,近期做了一個(gè)公眾號(hào)網(wǎng)頁開發(fā)。在此期間也踩了一些坑,解決這些坑之后,準(zhǔn)備對(duì)這個(gè)項(xiàng)目進(jìn)行復(fù)盤。記錄下項(xiàng)目從開發(fā)到上線所解決的問題,并對(duì)使用vue進(jìn)行公眾號(hào)開發(fā)的步驟進(jìn)行一個(gè)總結(jié)。方便以后有問題進(jìn)行查閱。希望對(duì)你有所幫助
    2021-05-05
  • VUE2中的MVVM模式詳解

    VUE2中的MVVM模式詳解

    這篇文章主要為大家介紹了VUE2中的MVVM模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • vue-cli安裝使用流程步驟詳解

    vue-cli安裝使用流程步驟詳解

    這篇文章主要介紹了 vue-cli安裝使用流程,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • 詳解如何在vue中封裝axios請(qǐng)求并集中管理

    詳解如何在vue中封裝axios請(qǐng)求并集中管理

    這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請(qǐng)求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下
    2023-10-10
  • vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)

    vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)

    使用vue也好有一段時(shí)間了,也算對(duì)其雙向綁定原理也有了解個(gè)大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • vue自定義全局組件(自定義插件)的用法

    vue自定義全局組件(自定義插件)的用法

    這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue3初始化如何調(diào)用函數(shù)

    Vue3初始化如何調(diào)用函數(shù)

    這篇文章主要介紹了Vue3初始化如何調(diào)用函數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式

    vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式

    這篇文章主要介紹了vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04

最新評(píng)論