axios get 请求图片跨域

Vue.js Ajax(axios)菜鸟教程：https://www.runoob.com/vue2/vuejs-ajax-axios.html

Axios中文说明：https://www.kancloud.cn/yunye/axios/234845

Vue.js已不推荐使用的vue-resource：

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，但以后不再把 vue-resource 作为官方的 ajax 方案。

知乎链接：https://www.zhihu.com/question/52418455/answer/130535375

---

一、安装axios

npm install axios --save

（安装成功后，package.json文件的"dependencies"中会出现axios的版本号。）

在vue中，一般使用axios去发送请求，axios是基于promise对象封装的ajax的第三方库，所以axios里面包含了promise对象。

二、开发环境配置请求接口（可配置多个跨域接口）

在config/index.js的proxyTable中添加：

proxyTable: {
      //自己设置一个代理服务器
      '/api': {
        target: 'http://***/***/***', //服务器接口域名，以后用 '/api'代替该网址
        changeOrigin: true,//是否跨域
        pathRewrite: {
          //本地VUE启动后的访问域名
          '^/api': ''
        }
      },
    },
}

其中，'api'可自定义。

三、实现

引入axios

import axios from "axios"

发送get请求

mounted() {
    this.getData();
},
methods: {
    getData() {
      // 发送get请求，
      // 参数1: 必填，字符串，请求的数据接口的url地址
      // 参数2：可选，json对象，要提供给数据接口的参数
      // 参数3：可选，json对象，请求头信息
      axios
        .get("/api?ID=123")
        .then(function(response) {
          // 请求成功以后的回调函数
          console.log("请求成功");
          console.log(response);
        })
        .catch(function(error) {
          // 请求失败以后的回调函数
          console.log("请求失败");
          console.log(error.response);
        });
    },
}

四、同时执行多个请求

axios.all([
    axios.get(url1),
    axios.get(url2)
  ])
  .then(axios.spread(function (url1Data, url2Data) {
    //上面两个请求都完成后，才执行这个回调方法
    //收到的是数组，顺序和请求发送的顺序相同，使用axios.spread分割成多个单独的响应对象
    console.log('url1Data', url1Data.data);   
    console.log('url2Data', url2Data.data);
  }));

五、使用async/await书写异步机制代码

使用异步机制，可在其他方法中使用 通过get请求获取的数据。

https://www.jianshu.com/p/1e75bd387aa0

get(url) {
        //Promise对象，两个参数及两个函数，
        //resolve： 将Promise对象的状态从'未完成'变为'成功'，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
        //reject：将Promise对象的状态从'未完成'变为'失败'，在异步操作失败时调用，并将异步操报出的错误作为参数传递出去
        return new Promise((resolve, reject) => {
            axios.get(url)
                .then(res => {
                    resolve(res.data);
                    console.log("2",res.data)
                })
                .catch(err => {
                    reject(err.data)
                    console.log("2",err.data)
                })
        });
    }

async function getData(url) {
      try {
          console.log("1,start");
          let data = await get(url); //等待一个promise对象，返回promise对象的处理结果
          console.log("3，end");
      } catch (err) {
          console.log("4,error");
      }
    }

getData("/api?ID=123");