Vue之 axios执行多个并发请求，局部全局配置

axios执行多个并发请求

         <script>
            import axios from 'axios'
            export default {
              name: 'App',
              data(){
                return{
                  a:'接口地址apiA',
                  b:'接口地址apiB'
                }
              },
              created(){
              
                /* axios.all([axios.get(this.a),axios.get(this.b)])
                .then(axios.spread((res1,res2)=>{
                  console.log(res1);
                  console.log(res2);
                  返回两个参数
                }))  */
                 Promise.all([axios.get(this.a),axios.get(this.b)])
                .then(res=>{
                  console.log(res);
                  返回数组Array(2)包含这两项                    
              },
              methods:{
              }
            }
          </script>
                  

axios局部配置

         先引入axios
             import axios from 'axios'
             export default {
               data(){
                return{
                  instance :null
                }
               },
               created(){ 
                创建实例时设置配置的默认值
                this.instance=axios.create({
                   baseURL:'接口文档地址',
               /* 如果请求花费了超过“timeout’的时间，请求将被中断 */
                   timeout:3000,
                   headers:{
                    'Authorization':localStorage.token
                   }
                 })
               }
               methods:{
               login(){
                  this.instance.post(‘路径’)
               }
           }
           

axios全局配置

        created() {
            axios.defaults.baseURL = '接口文档地址',
            axios.defaults.headers.common['Authorization'] = localStorage.token
        }
        methods:{
               login(){
                  axios.post(‘路径’)
        }

Vue CLI跨域解决

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开
    发环境下将 API 请求代理到 API 服务器。这个问题可以通过 `vue.config.js`
    中的 `devServer.proxy` 选项来配置。
    module.exports = defineConfig({
      transpileDependencies: true,
      devServer: {
      //代理服务器
        proxy: {
          '/api': {
            target: '真正的服务器地址',
          }
        }
      }
    })
      回到页面直接调用'/api'
        created(){
        axios.get('/api')  请求接口直接请求代理服务器地址
        .then(res=>{
          console.log(res)
          //可以获取
        })
      }
      配置完地址，必须重新启动项目


    
  。