Vue項目封裝請求數據的接口總結


 

以前的慣用做法都是直接在需要的頁面寫請求數據的接口。但是因為項目中會頻繁的請求后台,所以將所有的請求封裝起來,方便管理。

一、配置url(可以放在一個js中)

  1. 引入axios:import axios from “axios”
  2. 配置url

                       const service=axios.create({

                                                 baseURL:請求的地址,

                                                 timeout:5000     //訪問超時的時間限制

                      });

  1. 拋出(如果是新起的js文件):export default service;

二、寫接口的文件(js文件)

  1. 將配置url和axios引入:(例如配置的url文件叫request.js)

       2.配置各個接口:(例如叫business.js)

      Get請求:

                     export function testGet(參數){

                             return request({

                                       method:’get’,

                                       url:’具體接口’,

                                      params:{

                                             //json格式,如果有就寫,沒有就去掉。

                                     }

                            })

                   }

     Post請求:

                    export function testPost(參數){

                                const data={}  //寫要傳遞的參數,json格式

                                return request({

                                         method:’post,

                                        url:’具體接口’,

                                       datatype:’json’,

                                       data

                               })

                    }

三、使用

       1.引入:import   {要引入的方法名字}   from   business.js

       2.使用

            TestGet().then(res=>{  //成功進這個 }).catch(err=>{ //報錯進這個});

            放在當前頁面使用的方法里。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM