牛骨文教育服务平台(让学习变的简单)
博文笔记

axios 详细使用方法 及跨域请求(反向代理)的处理

创建时间:2017-09-15 投稿人: 浏览次数:14069

安装


使用 npm:

$ npm install axios

或者 使用 bower:

$ bower install axios

或者直接使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js设置如下

引入axios

import axios from "axios"

挂载到vue的原型

Vue.prototype.$http = axios

在webpack.config.js(config—>index.js)文件里设置代理

dev: {
    env: require("./dev.env"),
    port: 8080,  //设置访问的端口号
    autoOpenBrowser: true, //自动打开浏览器
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
        "/api": {
            target: "http://10.10:8063", //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
                "^/api": "/" //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替
                    // 比如我要调用"http://0.0:300/user/add",直接写‘/api/user/add’即可 代理后地址栏显示/
            }
        }
    }

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get("/user?ID=12345")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地,上面的请求可以这样做
axios.get("/user", {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行 POST 请求

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])

var instance = axios.create({
  baseURL: "https://some-domain.com/api/",
  timeout: 1000,
  headers: {"X-Custom-Header": "foobar"}
});

参考使用说明API:https://www.kancloud.cn/yunye/axios/234845

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。