封装请求 request.js
生活随笔
收集整理的這篇文章主要介紹了
封装请求 request.js
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
pc
vue項目
import axios from 'axios' // 要先引入彈窗ui import { MessageBox, Loading } from 'element-ui'let loading //定義loading變量 function startLoading () { //使用Element loading-start 方法loading = Loading.service({text: '加載中……',background: 'rgba(0, 0, 0, 0.2)'}) }function endLoading () { //使用Element loading-close 方法loading.close() }const service = axios.create({// vue.config.js 中 定義本地方向代理 process.env.VUE_APP_BASE_API 代表 /apisbaseURL: process.env.VUE_APP_BASE_API, // url = base url + request urltimeout: 1000000 // request timeout })service.interceptors.request.use(config => {startLoading()return config},error => {endLoading()return Promise.reject(error)} )service.interceptors.response.use(response => {endLoading()const res = response.datareturn res},error => {endLoading()return Promise.reject(error)} )export default service小程序
建立一個 request.js 文件
//定義發(fā)送次數(shù) let ajaxTimes = 0; // 調(diào)用request發(fā)起請求傳入?yún)?shù)對象 config,{url:'xxxx',data:{},method:'get/post..'} ; export const request = (config) => {//每調(diào)用發(fā)送一次,記錄ajaxTimes的值ajaxTimes++; // 判斷請求路徑中是否帶有 '/my/' 請求的是權限路徑 header帶 tokenlet header = {...config.url}if(config.url.includes('/my/')){// 拼接 header 帶上 tokenheader['Authorization'] = wx.getStorageSync('token')}//顯示加載中wx.showLoading({title: '加載中',mask:true})//定義baseURLconst baseURl = '....xxxx';return new Promise((resolve,reject) => {wx.request({...config,header:header,url: baseURl + config.url,success: (result) => {resolve(result)},fail: (err) => {reject(err)},complete: () => {ajaxTimes--;if(ajaxTimes === 0){// 隱藏加載中wx.hideLoading()} }})}) }在需要的頁面引入
import {request} from '路徑。。。request.js'// 編寫請求方法 getData(){request(config).then((res) => {console.log(res)}) }// 或者使用 async await async getData(){const res = await request(config) }總結(jié)
以上是生活随笔為你收集整理的封装请求 request.js的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 不用计算实现 图片懒加载
- 下一篇: 防抖和节流学习记录