axios的详细用法以及后端接口代理

Posted mino1996

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios的详细用法以及后端接口代理相关的知识,希望对你有一定的参考价值。

安装


使用 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‘}
});

 



以上是关于axios的详细用法以及后端接口代理的主要内容,如果未能解决你的问题,请参考以下文章

axios解决调用后端接口跨域问题

构建:vue项目配置后端接口服务信息

前端axios请求, 后端接口返回文件流,完成下载

前端调用后端接口 超时处理 Promise.race() 应用

#yyds干货盘点#nginx代理后端接口404

vue element admin 4 最新版本 打包 跨域 代理配置 连接后端接口