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

Vue項目API接口封裝的超詳細解答

 更新時間:2022年09月19日 11:16:17   作者:one.158  
在前端vue的開發(fā)中,有一點是必須要做的,那就是將所有的API接口封裝起來,因為從開發(fā)到最終上線的過程中,API是需要經常更換的,下面這篇文章主要給大家介紹了關于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網絡請求方案原生網絡請求和js網絡請求庫

    vue網絡請求方案原生網絡請求和js網絡請求庫

    這篇文章主要為大家介紹了網絡請求方案原生網絡請求和js網絡請求庫的過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步
    2021-11-11
  • vue.js學習之遞歸組件

    vue.js學習之遞歸組件

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

    如何使用vue開發(fā)公眾號網頁

    因為項目需要,近期做了一個公眾號網頁開發(fā)。在此期間也踩了一些坑,解決這些坑之后,準備對這個項目進行復盤。記錄下項目從開發(fā)到上線所解決的問題,并對使用vue進行公眾號開發(fā)的步驟進行一個總結。方便以后有問題進行查閱。希望對你有所幫助
    2021-05-05
  • VUE2中的MVVM模式詳解

    VUE2中的MVVM模式詳解

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

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

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

    詳解如何在vue中封裝axios請求并集中管理

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

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

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

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

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

    Vue3初始化如何調用函數

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

    vue用復選框實現(xiàn)組件且支持單選和多選操作方式

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

最新評論