前端在vue里，封装ajax请求，并解决跨域问题

一、封装ajax
1、首先创建vue项目的时候，会创建一个api文件夹，然后这个里面包含index.js和ajax.js文件
描述：index.js文件里面需要放我们多个接口的请求函数。
ajax.js文件里需要些我们封装的ajax请求函数
2、在要请求接口的页面里 引入api/index文件，然后在mounted里面调用index里写好的函数，并发起请求
3、记得axios要先 npm i --save axios下载
贴上对应的代码

ajax.js文件代码

/**
 * ajax请求接口函数模块
 * 返回一个promise对象，(异步返回的数据是response.data数据)
 */
import axios from "axios"
export default function ajax(url, data = {}, type = 'GET') {
  return new Promise(function (resolve, reject) {
    let promise
    if (type === "GET") {
      // 准备 url query 参数数据
      let dataStr = '' //数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr != '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      //   发送get请求
      promise = axios.get(url)
    } else {
      // 发送 post 请求
      promise = axios.post(url, data)
    }
    // 拿到response.data数据
    promise.then(response => {
        // 成功调用resolve
      resolve(response.data)
    }).catch(error => {
        // 失败调用reject
      reject(error)
    })
  })
}

index.js文件

/*
*包含n个接口的请求函数

*/
import ajax from "./ajax";
// 传参形式两种，1、query形式 就是 {}，这个是拼接到url地址？后面的参数,
// 2、params形式，直接传就行
 
// const BASE_URL='http://localhost:4000';
const BASE_URL="/api"

// 根据经纬度获取位置详情
export const reqAddress= (geohash)=>ajax(`${BASE_URL}/position/${geohash}`)
// [2、获取食品分类列表](#2获取食品分类列表)<br/>
export const reqFoodType= ()=>ajax(BASE_URL+"/index_category")

xxx.vue文件

import {reqFoodType,reqAddress} from './api'
export default {
  // 请求接口在mounted
  async  mounted(){
    const result=await reqFoodType()
    console.log(result)
    const result2=await reqAddress("40.10038,116.36867")
    console.log(result2)
  },
  // 映射FooterGuide组件
  components: {
    FooterGuide,
  },
};

二、解决跨域
1.在config/index.js文件中修改proxyTable

// 解决跨域
proxyTable: {
  '/api':{//匹配所有以 /api 开头的请求路径
    target:"http://localhost:4000",//代理目标的基础路径
    changeOrigin:true,//支持跨域
    pathRewrite:{//重写路径，去掉开头的 /api
      "^/api":''
    }
  }
},

搞定，跟着视频学习的，很有效果，所以就记录一下笔记。大家也可以参考一下。