【Vue3】Axios简易二次封装+token+跨域问题+接口同步调用使用。

一、npm安装axios

npm install axios --save

二、main.js中配置axios

import { createApp } from 'vue'

import axios from 'axios';

import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

三、解决跨域问题

找到vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      'api':{
          target:'https://......',  //接口的公共部分 域名+端口号
          pathRewrite:{'^/api':''},
          ws:true,
          changeOrigin:true
      }
    }
  }
})

如果需要多个不同域名接口进行跨域，再进行创建即可。

四、封装Axios

1、首先在src文件夹下创建api文件夹。

        api下创建request.js和index.js

文件名	作用
request.js	用来封装axios
index.js	用来存放接口文件

2、在request.js文件下进行如下配置

import axios from "axios";   //导入axios
const token = sessionStorage.getItem('token')||'默认的token'   
//token存放在session里 如果没有则执行默认的token

const requests = axios.create({
    baseURL:'/api',    //跨域里配置的api
    timeout:5000        //响应时间
})

//添加请求拦截器
requests.interceptors.request.use(function(config){
    //在发送之前做些什么，例如加入token
    config.headers.Authorization = 'Bearer ' +token   //设置请求头token
    return config;
},function(error){
    //对请求错误做些什么？
    return Promise.reject(error)
})


//添加响应拦截器
requests.interceptors.request.use(function(response){
    //在接受响应时做些什么，例如跳转到登录页
    return response;
},function(error){
    //对响应错误做点什么？
    return Promise.reject(error)
})

export default requests

3、在index.js文件下进行如下配置

import requests from './request'

//以post请求为例
export const saishipost = (data)=>requests({
    url:'/match/user/info',    //直接放地址即可。
    method:'post',
    data
})

4、页面中调用同步接口方式

<script>
import {saishipost} from "@/api/index"   //按需引入里面的接口
export default {
  name: 'App',
  data(){
    return{
      obj:[] //用来接收数据
    }
  },
  methods:{
    async postForm(){            //定义一个方法请求接口
       const re=  await saishipost()      //接口调用的方法
        // console.log(re)
        this.obj = re.data              //赋值
       })
    }
  },
  mounted(){
    this.postForm()                    //调用接口请求
  }
}
</script>

5、解决返回数据是Promise的情况

正常情况下 执行到上面就已经完成了当前页面对接口的调用

如果控制台出现 secondSong：Promise的情况，应该是没有复制，直接return了

return res.data  会出现Promise的情况

所以直接赋值即可。