uniapp封装请求后台接口

image.png

1.新建一个目录utils,然后该目录下新建一个request.js文件，进行封装。

image.png

import { getToken } from '@/utils/auth'//获取token
function request(obj) {
    return new Promise((resolve, reject) => {
        const baseUrl = "https://meituan.thexxdd.cn/api"
        var method = obj.method || "GET";
        var url = baseUrl + obj.url || "";
        var data = obj.data || {};
        let token = getToken();
        var header = obj.header || {
            'Content-Type': obj.contentType || 'application/json',
            'token': token
        }
        uni.request({
            url: url,
            data: data,
            method: method,
            header: header,
            success: ((res) => {
                if (res.statusCode === 403 || res.statusCode === 401) {
                    uni.reLaunch({// 错误处理，返回登录页
                        url: '/pages/login/login'
                    })
                } else if (res.statusCode === 200) {
                    console.log('request', res)
                    uni.showToast({
                        title: '请求接口成功200',
                        duration: 2000
                    })
                    resolve(res)
                }
            }),
            fail: ((err) => {
                uni.showToast({
                    title: '请求接口失败',
                    duration: 2000
                })
                reject(err)
            })
        })
    })
}
export default request

2.在utils文件夹下一起建一个auth.js文件用来获取token

// import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken () {
  return Cookies.get(TokenKey)
}

export function roles () {
  return Cookies.get(roles)
}

export function setToken (token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken () {
  return Cookies.remove(TokenKey)
}

export function setIsMobileCookie (val) {
  return Cookies.set('IsMobileCookie', val)
}
export function getIsMobileCookie (val) {
  return Cookies.get('IsMobileCookie')
}

3.建一个api的目录，然后相应pages是什么页面就建一个对应名字的目录和文件，list.js文件就是我们请求接口

// 引入工具类
import request from '@/utils/request.js' 
 
export function get(data){ // 
    return request({
        url: '/forshop/getprefer',
        method: 'GET',
        contentType:'application/x-www-form-urlencoded',
        data: data
     })
}

4.然后在页面上list.vue上调用接口。

image.png