应用在vue项目里的axios使用方法

桃扇骨 2021-06-24 15:59 583阅读 0赞

1.首先要安装axios，在你项目目录下安装axios。在命令行里输入：npm install axios；

2.然后要在main.js的入口文件里引入以下代码；

import axios from 'axios'
    axios.defaults.baseURL = url;//这里写上自己的基础url，例如www.csdn.com
    Vue.prototype.$axios = axios;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    import qs from 'qs';
    Vue.prototype.qs = qs;

3.新增一个请求数据必须携带的参数token（这步是非必须的，按照自己的项目需求来），这个token表示的是用户加密后的id；

//请求的拦截器
    axios.interceptors.request.use(function (config) {
      const token = token //设置统一参数，这个token的值要在cookie里面取
      if(config.method === 'post') {
          let data = qs.parse(config.data)
    
          config.data = qs.stringify({
              uid: uid,
              ...data
          })
      } else if(config.method === 'get') {
          config.params = {
              uid: uid,
              ...config.params
          }
      }
      return config;
    }, function (error) {
      return Promise.reject(error);
    })

4.在组件中使用axios请求数据。

mounted() {
          // get请求
          this.$axios({
              method: "get",
              url: url,// 这里填写请求数据的路径
              params: {// 这里填写请求数据的参数
                user_id: 1,//这里如果设置了统一参数token，那么这里就不必再填写user_id
                ... 
              }
            })
            .then(res => {
              console.log(res)
            }, err => {
              console.log(err);
            })
    
          // post请求
          this.$axios({
              method: "post",
              url: url,
              data: this.qs.stringify({
                user_id: 1,
                ...
              })
            })
            .then(res => {
              console.log(res)
            }, err => {
              console.log(err);
            })
        },

5.另外的方法就是直接在你的文件中引入：

当然了，如果使用的是vue框架的话，那么除了自己搭建vue开发环境这种方式外，也可以直接在你的文件中引入：

一切的前提是，你已经把所需要的文件都已经下载好，放进js这个文件夹了。

6.那么该怎么使用呢？跟上面的很类似，get请求：

axios({
                        method: "get",
                        url: url,//你访问的路径，即接口
                        params: {
                            userid: this.userid,
                            nickname: this.nickname
                            ...
                        }
                    })
                    .then(res => {
                        console.log(res)
                    }, err => {
                        console.log(err);
                    })

post请求(与get请求不一样，仔细看data部分)：

axios({
                        method: "post",
                        url: url,
                        data: Qs.stringify({
                            userid: this.userid,
                            nickname: this.nickname
                        })
                    })
                    .then(res => {
                        console.log(res)               
                    }, err => {
                        console.log(err);
                    })

7.以上就是axios的大致使用方法