[TOC] #### 1. luch-request 介紹 --- github : [https://github.com/lei-mu/luch-request](https://github.com/lei-mu/luch-request) luch-request 文檔 : [https://www.quanzhan.co/luch-request](https://www.quanzhan.co/luch-request) luch-request 基于 Promise 開發(fā)的 uni-app 跨平臺請求庫。對于使用者來說，最突出的優(yōu)點是: 方便簡單的自定義能力，可以通過 `custom` 自定義參數(shù)；相當(dāng)于 `uni.request()` 來說，可配置更高，支持請求攔截，響應(yīng)攔截 #### 2. luch-request 安裝 --- **方式一: 使用 npm 安裝** 安裝 luch-request 包 ``` npm i luch-request -S ``` cli 用戶使用 npm 包需要在項目根路徑下創(chuàng)建 `vue.config.js` 文件，增加以下內(nèi)容: ```javascript // vue.config.js module.exports = { transpileDependencies: ['luch-request'] } ``` 使用示例 : ```javascript import Request from 'luch-request' // 使用 npm const http = new Request(); ``` **方式二: 通過 dcloud 插件市場安裝** luch-request 插件 : [https://ext.dcloud.net.cn/plugin?id=392](https://ext.dcloud.net.cn/plugin?id=392) 通過 dcloud 插件市場安裝 luch-request 插件會將其安裝到 js_sdk 目錄下，使用示例 : ```javascript import Request from '@/js_sdk/luch-request/luch-request' // 使用 dcloud 插件 const http = new Request(); http.get('/user/info', { params: { uid: 1 } }).then(res => { }).catch(err => { }) ``` #### 3. luch-request 封裝 --- uView 的 http 網(wǎng)絡(luò)請求就是集成于 luch-request，uView 對其進(jìn)行了簡單封裝uView 官方文檔提供一套 [封裝示例](https://www.uviewui.com/js/http.html#%E5%AE%9E%E8%B7%B5)，可參考其封裝思想，亦可在這套封裝示例上進(jìn)行修改。下面是沒有使用 uView 時，單獨安裝 luch-request 插件進(jìn)行封裝的示例 在 uni-app 的入口文件 main.js 中將 luch-request 實例掛載到 `uni.http` 上 ```javascript import Request from '@/js_sdk/luch-request/luch-request/index.js' uni.http = new Request() ``` **一、全局配置，以及請求，響應(yīng)攔截器定義** 在 `api/request.js` 中進(jìn)行網(wǎng)絡(luò)請求全局配置，請求攔截器和響應(yīng)攔截器定義，下面是最簡單的結(jié)構(gòu) : ```javascript module.exports = vm => { // 初始化請求配置 uni.http.setConfig(config => { // 可在此處接口域名前綴 return config }) // 請求攔截 uni.http.interceptors.request.use(config => { // 此時 data 為 undefined, 賦予默認(rèn) {} config.data = config.data || {} // 可在此處將用戶狀態(tài) token 放入請求頭 return config }, config => { // 可使用async await 做異步操作 return Promise.reject(config) }) // 響應(yīng)攔截 uni.http.interceptors.response.use(response => { const data = response.data return data.data === undefined ? {} : data.data }, response => { // 對響應(yīng)錯誤做點什么 （statusCode !== 200） return Promise.reject(response) }) } ``` **二、引用配置** 在 `main.js` 中引用 `api/request`，注意引用的書寫位置，需要在得到 Vue 實例之后，如下: ```javascript const app = new Vue({ store, ...App }) // 引入請求封裝,將app參數(shù)傳遞到配置中 require('@/api/request')(app) ``` **三、Api 集中管理** 在 `api/user.js` 中編寫請求接口，將用戶相關(guān)的接口都放入該文件 在這個文件到導(dǎo)出方法即可，為了使用方便，原則是可以通過下面這種方式解構(gòu)得到方法 ```javascript // 需要使用哪個接口，就只解構(gòu)出相應(yīng)的接口方法 import { login, getUserInfo } from '@/api/user' ``` 導(dǎo)出方法的方式有很多，列舉出幾種寫法 : ```javascript const http = uni.http module.exports = { // 用戶登錄 login: params => http.post('/user/login', params), // 獲取用戶信息 getUserInfo: params => http.get('/user/getUserInfo', { params }), } ``` ```javascript const http = uni.http // 用戶登錄 export const login = params => http.post('/user/login', params) // 獲取用戶信息 export const getUserInfo = params => http.get('/user/getUserInfo', { params }) ```