配置接口请求

1、react18.3 配置接口请求 +3、vue3.5 配置接口请求

• 4-1、新建utils/http.ts

   import axios from 'axios'
   import type { AxiosRequestConfig, AxiosResponse } from 'axios'
   import router from '@/router/router.ts'
   const instance = axios.create({
     baseURL: 'http://api.h5ke.top/',
     timeout: 5000
   })
   
   instance.interceptors.request.use(
   
     function(config) {
       if (config.headers) {
         config.headers.authorization = 'token'
       }
       return config
     },
     function(error) {
       return Promise.reject(error)
     }
   )
   
   instance.interceptors.response.use(
     function(response) {
       // 路由跳转
       // if (response.data.errmsg === 'token error') {
       // window.location.replace('/#/login')
       router.push({ path: '/login' })
       // }
       return response
     },
     function(error) {
       return Promise.reject(error)
     }
   )
   
   interface Data {
       [index: string]: unknown
   }
   
   interface Http {
       get: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
       post: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
       put: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
       patch: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
       delete: (url: string, data?: Data, config?: AxiosRequestConfig) => Promise<AxiosResponse>
   }
   
   const http: Http = {
     get(url, data, config) {
       return instance.get(url, {
         params: data,
         ...config
       })
     },
     post(url, data, config) {
       return instance.post(url, data, config)
     },
     put(url, data, config) {
       return instance.put(url, data, config)
     },
     patch(url, data, config) {
       return instance.patch(url, data, config)
     },
     delete(url, data, config) {
       return instance.delete(url, {
         data,
         ...config
       })
     }
   }
   export default http

• 4-2、新建全局API接口文件api/user.ts

   import http from '@/utils/http.ts'
   
   export function login(data) {
   return http.post('users/login', data)
   }
   
   export function infos() {
   return http.get('/users/infos')
   }

• 4-3、stores中引用stores/user.ts

   import { defineStore } from 'pinia'
   import { reactive } from 'vue'
   import { login, infos } from '@/api/user.ts'
   export const useUserStore = defineStore('user', () => {
   const Slogindata = reactive({ data: '' })
   const Sinfo = reactive({ data: '' })
   
   async function SFlogin(data) {
   let result = await login(data)
   Slogindata.data = result.data
   document.cookie = 'token=' + result.data.token
   }
   async function SFinfo() {
   let result = await infos()
   Sinfo.data = result.data
   }
   return { Slogindata, SFlogin, Sinfo, SFinfo }
   })

• 4-4、页面中使用

   <script setup lang="ts">
   import Father from '@/components/Father.vue'
   import { useUserStore } from '@/stores/user.ts'
   const userStore = useUserStore()
   // 登录
   const _login = async() => {
     let data = { email: 'huangrong@imooc.com', pass: 'huangrong' }
     await userStore.SFlogin(data)
     console.log(userStore.Slogindata.data.token)
   }
   // 获取用户信息
   const _getUserInfo = async() => {
     await userStore.SFinfo()
     console.log(userStore.Sinfo.data)
   }
   </script>
   <template>
     <div>
       <Father/>
       <button @click="_login">store异步操作(登录)</button>
       <button @click="_getUserInfo">store异步操作(获取用户信息)</button>
     </div>
   </template>
   
   <style scoped>
   
   </style>

2、小程序 配置接口请求

• 3-1、新建utils/http.js

   const request = (url, options) => {
   
   let header = {}
   if (options.method == 'POST') {
   header = {
   'content-type': 'application/x-www-form-urlencoded',
   }
   } else {
   header = {
   'content-type': 'application/json',
   }
   }
   return new Promise((resolve, reject) => {
   wx.request({
   // {app.globalData.host}为接口请求中的公共部分写在app.js中
   url: `http://api.h5ke.top/`,
   method: options.method,
   data: options.method === 'GET' ? options.data : JSON.stringify(options.data) && options.method === 'POST' ? options.data : options.data,
   header: header,
   success(request) {
   if (request.data.code === '20000') {
   resolve(request.data)
   } else {
   reject(request.data)
   }
   },
   fail(error) {
   reject(error.data)
   }
   })
   })
   }
   
   const get = (url, options = {}) => {
   return request(url, { method: 'GET', data: options })
   }
   const post = (url, options) => {
   return request(url, { method: 'POST', data: options })
   }
   const put = (url, options) => {
   return request(url, { method: 'PUT', data: options })
   }
   // 不能声明DELETE（关键字）
   const remove = (url, options) => {
   return request(url, { method: 'DELETE', data: options })
   }
   
   module.exports = {
   get,
   post,
   put,
   remove
   }

• 2-2、使用

    pageData(){
     http.post('/users/login', {
       'email': 'huangrong@imooc.com',
       'pass': 'huangrong'
       }).then(res => {
      console.log(res)
   }).catch(err => {    
   })
   }