vue-cli引入axios

妖狐艹你老母 2023-05-21 15:18 18阅读 0赞

1、创建vue-cli项目：

> [https://blog.csdn.net/qq\_39648029/article/details/104250067][https_blog.csdn.net_qq_39648029_article_details_104250067]

2、下载依赖：

>  npm install axios --save

3、 在 main.js中添加如下代码：

import axios from 'axios';
    Vue.prototype.$axios = axios;

![20200417152713254.png][]

4、创建一个请求工具类 https.js

![20200417152902630.png][]

import axios from 'axios'
    
    axios.defaults.timeout = 5000;                        //响应时间
    axios.defaults.baseURL = 'http://localhost:9003';   //配置接口地址
    
    //POST传参序列化(添加请求拦截器)
    axios.interceptors.request.use((config) => {
      //在发送请求之前做某件事
      //携带请求头
      let token = window.localStorage.getItem("accessToken")
      console.log("token:"+token);
      //下面两种方式都行
      // config.headers.accessToken = token;
      config.headers['accessToken'] = token
    
      return config;
    },(error) =>{
      console.log('错误的传参')
      return Promise.reject(error);
    });
    
    //返回状态判断(添加响应拦截器)
    axios.interceptors.response.use((res) =>{
      //对响应数据做些事
      if(!res.data.success){
        return Promise.resolve(res);
      }
      return res;
    }, (error) => {
      console.log('网络异常')
      return Promise.reject(error);
    });
    
    //返回一个Promise(发送post请求)
    export function fetchPost(url, params) {
      return new Promise((resolve, reject) => {
        axios.post(url, params)
          .then(response => {
            resolve(response);
          }, err => {
            reject(err);
          })
          .catch((error) => {
            reject(error)
          })
      })
    }
    返回一个Promise(发送get请求)
    export function fetchGet(url, param) {
      return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
          .then(response => {
            resolve(response)
          }, err => {
            reject(err)
          })
          .catch((error) => {
            reject(error)
          })
      })
    }
    export default {
      fetchPost,
      fetchGet,
    }

5、使用：

import https from '@/api/https'

https.fetchGet('/xxx/xxx',{xx:'xx'}).then((res) => {
               console.log(res)
            }).catch(err=>{
                console.log(err)
              }
            )
    
    https.fetchPost('/xxx/xxx',this.form).then((res) => {
                  console.log(res)
                }).catch(err=>{
                    console.log(err)
                  }
                )

6、后端get就直接 @RequestParam("aa")；post就直接@RequestBody

前端不要设置请求头类型，这里axios会自动配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_qq_39648029_article_details_104250067]: https://blog.csdn.net/qq_39648029/article/details/104250067
[20200417152713254.png]: /images/20230521/83b56c92ab6d45fba02644f3574fe79c.png
[20200417152902630.png]: /images/20230521/f2fb03e163a64d1d88aa7a52c6b74a1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: /images/20230521/f9f5654f772a4b7a86f0442e6d53d4cb.png