vue 中使用axios的总结

最新推荐文章于 2022-09-23 09:00:00 发布

置顶 cyclv

最新推荐文章于 2022-09-23 09:00:00 发布

阅读量2.3k

点赞数 1

文章标签： axios vue-axios

本文链接：https://blog.csdn.net/weixin_41487694/article/details/90514447

版权

1.介绍axios

我就不介绍了，直接上中文文档链接 http://www.axios-js.com/

框架整合vue-axios nuxtjs-axios react-axios

2.在vue中使用的方式有两种

第一种，（axios 特别的方便）

npm install axios

第二种（vue-axios 基于vuejs 的轻度封装，很方便）

0.1，安装vue-axios

npm install --save axios vue-axios

0.2，安装之后在main.js中引入以下内容

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)

0.3，在需要使用请求的页面进行编写

created: function(){
    const api = 'https://cnodejs.org/api/v1/topics'
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
},

3.跨域请求（proxyTable）

百度proxyTable了解更多

修改config下的index.js中的proxyTable如下

    proxyTable:{
      "/api":{
          target:"https://www.cyclv.com",//访问的服务器地址
          changeOrigin:true,//true为开启代理
          //secure: true, // 如果是https接口，需要配置这个参数
          pathRewrite:{
              '^/api': '/'//路径的替换规则
             /*
              *这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉
              *假如后台文档的接口是 "https://www.cyclv.com/admin/login"
              *前端调取API接口应写：axios.get('/api/admin/login')
              */
          }
      }
    }

记得重启，不然依然不成功.