Vue中的axios深度探索：从基础安装到高级功能应用的全面指南

前言

    在vue项目中，高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁，其重要性不言而喻。本文将带您领略axios的魅力，从基本概念、安装方法，到高级应用技巧，助您快速掌握在vue中利用axios进行http请求的精髓。我们不仅会探讨axios的基础用法，如get、post请求，还将深入探索跨域配置、全局注册以及设置拦截器等高级功能，助您轻松实现优雅的前后端通信。

一、axios 请求

1. axios的概念

2. axios的安装

npm install axios --save

3. axiso请求方式介绍

axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)

 - 提交方式有get post delete put 等,
 - .then() 请求成功后执行then方法
 - .catch()请求失败后执行catch方法

//使用axios发送ajax请求,获取所有新闻信息
  fnserachnews(){
	  // result是服务端对我们发起请求的响应，请求成功执行then方法
      this.$axios.get("http://localhost:8000/news/").then((result) => {
          //通过response获取具体数据，赋值给data中定义的newslist 
          this.newslist = result.data.data
          console.log(result.data.data);
      }).catch((err) => {
      	  //请求失败执行catch方法
          alert(err)
      });
  },

4. axios请求本地数据

{
    "first":[
        {"name":"张三","nick":"法外狂徒"},
        {"name":"李四","nick":"小李子"},
        {"name":"王五","nick":"小五"}
    ]
}

<template>
  <div>
    <button @click="getdata">获取本地数据</button>
    <p>{{ data.first }}</p>
    <ul v-for="(n, index) in data1.first" :key="index">
      <li>{{ n.name }}</li>
      <li>{{ n.nick }}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "test",
  data() {
    return {
      // 定义变量, object 类型.
      data1: {},
    };
  },
  methods: {
    getdata() {
      //   使用axios 请求本地数据
      //   axios.请求方式("请求接口路径").then(箭头函数).catch(箭头函数)
      axios.get("../../../a.json")
        .then((response) => {
          // 把获取到的数据赋值给变量,然后展示
          console.log(response);
          console.log(response.data, typeof response.data);
          this.data1 = response.data;
        })
        .catch((error) => {
          // 请求失败
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped></style>

5. axios跨域

跨域的简单介绍及后端解决办法：

const { defineconfig } = require('@vue/cli-service')
module.exports = defineconfig({
  transpiledependencies: true,
  lintonsave:false, /*关闭语法检查*/
  //开启代理服务器（方式一）vue3可能会由问题，如果第一种方式不可以，使用下面方式
	 devserver: {
     proxy: 'http://127.0.0.1:8000'
   }, 
	//开启代理服务器（方式二）
	devserver: {
    proxy: {
       //第一个跨域代理
      '/app': {
        target: 'http://127.0.0.1:8000/', //接口域名
        changeorigin: true,             //是否跨域
        ws: true,                       //是否代理 websockets
        secure: false,                   //是否https接口
        // pathrewrite: {    //路径重置如果需要重置，可以重置成target地址
        //     '^/app':''
        // }
      },
      //第二个跨域代理
      '/home': {
        target: 'http://127.0.0.1:8000/',
        ws: true, //用于支持websocket
        changeorigin: true //用于控制请求头中的host值
        // pathrewrite: {                  //路径重置
        //     '^/app':''
        // }
      }
    }
  }
})

6. axios全局注册

// main.js
import { createapp } from 'vue'
import app from './app.vue'

import  axios  from "axios";
// 跨越配置好以后，测试结果
// axios.defaults.baseurl = "http:127.0.0.1:8000"
const app = createapp(app)

app.config.globalproperties.$axios = axios

app.mount('#app')

7. axios支持的请求类型

1）get请求

2）post请求

let data = {}
let config = {}
方式一:  axios.post('/url',data,config)
方式二:  axios({
	 methods: 'post',
	 url: '/url',
	 data: data,
	 config: config
})

3）put请求

4）patch请求

5）delete请求

axios.delete('/url', {params: {id: 12}}) #参数在url params---很重要
axios.delete('/url', {data: {id: 12}}) #参数在请求体中 将params改为 data就行　

二、axios 进阶

1. 设置axios拦截器

什么是拦截器

拦截器的作用和使用

const instance = axios.create({
  //baseurl:url,
  timeout:5000  // 延时
})

1、在requesr.js中设置请求拦截器
interceptors.request.use（）
2、设置响应拦截器
interceptors.response.use()

// 请求拦截
instance.interceptors.request.use(
  function (config) {
    console.group('全局请求拦截')
    console.log(config)
    return config
  },
  function (err){
    return promise.reject(err)
  }
)

// 响应拦截
// 服务器返回数据之后都会先执行此方法
instance.interceptors.response.use(
   function (response){
     console.group('全局响应拦截')
     console.log(response)
     return response
   },
  function (err){
     return promise.reject(err)
  }
)

2. axios 封装

//  utils/request.js
import axios from "axios";
// const baseurl = "http://127.0.0.1:8000"; // 更换成自己的api接口地址
const axiosins = axios.create({
//   baseurl,
  timeout: 10 * 1000 // 超时时间设置为10秒
});
// 封装get请求,并将封装的方法暴露出去
export const get = (url, params) => {
  return axiosins.get(url,{params})
}
// 封装post请求
export const post = (url, data) => {
  return axiosins.post(url,data)
}
// 封装put请求
export const put = (url, data) => {
  return axiosins.put(url,data)
}
// 封装delete请求
export const del = (url, data) => {
  return axiosins.delete(url,{data})
}
................................................
// 封装get
 get("https:/localhost:8000/news", {
        page: 3,
        per: 3,
      })
        .then((resp) => {
          console.log(resp.data);
        })
        .catch((error) => {
          console.log(error);
        });
....................................................        
// 封装post
post('https:/localhost:8000/news/login',{username:'xiaoming',password:'111111'})
         .then(res=>{
           console.log(res)
         }).catch(err=>{
         console.log(err)
       })