vue 基础搭建，token 、请求

前端配置各种请求的方法总结

配置api请求基础路径

config.js文件

const baseUrl = {
    dev:'/api', //可能后端请求地址需要配置api
    test:'https://test.cn', // 测试环境地址
    pro:'https://pro.com'  //正式环境
}

get请求

axios.js

import config from './config'
import qs form 'qs'

axios.defaults.widthCredentials = true // ajax请求携带cookie
axios.defaults.timeout = 18*10*1000 //设置超时时间

axios.interceptors.request.use(
 config => {
   const token = window.localStorage.getItem('token')
   if(token){
     config.header['Authorization'] = token
   }
   if(/authentication/.test(config.url) || /openwechat.test(config.url)){
     config.headers['content-Type'] = 'application/json;charset=UTF-8'
   }
   return config
 }
)

export default get(utl,params = {}){
    return new Promise((resolve,reject)=>{
     axios.get(config.baseUrl + url，{
       params:params,
       paramsSerializer:(params)=>{
         return qs.stringify(params,{arrayFormat:'indices',allowDots:true})
       }
     }).then(res=>{
       if(res){resolve(res.data)}
     }).catch(err=>{
        reject(err)
     })
    })
}

main.js配置

main.js

import {get} from './axios'
Vue.prototype.$get = get

页面调用请求方法

getData(){
  let params = {
    data:111
  }
  this.$get(url,params).then(res=>{
    if(res.code == 0){
      this.listData = res.data
    }
  })
}

前端vue3源码 github.com/cuixiaorui/…