【前后端数据交互：Axios】

前后端数据交互：Axios

Axios 介绍

  在前端页面展示的数据大多数都是通过访问一个API获取的，做这件事的方法有好几种，例如jquery ajax、vue-resource、axios，而vue-resource是vue插件，但3版本不再更新，目前官方推荐主流的axios，aixos是一个http请求库。
官方文档：http://www.axios-js.com/zh-cn/docs/

Axios 安装

1、安装axios：npm install axios
2、在main.js文件中全局注册
3、在组件中使用

//安装axios
npm install axios

//在main.js文件中全局注册
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Test from "@/components/Test";
import axios from "axios";

//createApp(App).use(router).mount("#app");
const app = createApp(App);
app.use(router).use(router).mount('#app');
app.component('Test', Test)
app.config.globalProperties.$axios=axios

从API获取用户数据，在前端展示：

<template><tableborder="1px"><thead><tr><td>ID</td><td>用户</td><td>邮箱</td><td>性别</td><td>地址</td></tr></thead><tbodyv-for="i in username":key="i.id"><tr><td>{{ i.id }}</td><td>{{ i.username }}</td><td>{{ i.email }}</td><td>{{ i.sex }}</td><td>{{ i.city }}</td></tr></tbody></table><buttontype="button"@click="getData">获取用户信息</button></template><script>
export default {
  name: "TestUser",
  data(){
    return{
      username: ""
    }
  },methods:{
      getData(){
        this.$axios.get('http://127.0.0.1:8888/api/v1/user') //过去接口数据
            .then(response => (this.username=response.data.data))  //将获取到的数据赋值给
      }
  }
}
可以加created实现打开页面自动加载

Axios发送post请求

<template><formaction="#">
    用户名：<inputtype="text"v-model="form.username">
    密 码：<inputtype="password"v-model="form.password"><button@click="btn">登录</button></form><pstyle="color: red"v-if="notic">用户名或密码不能为空</p></template><script>exportdefault{name:"postreq",data(){return{form:{username:"",password:""},notic:false}},methods:{btn(){if(this.form.username ==""||this.form.password ==""){this.notic =true}else{this.notic =false
        console.log(this.form)this.$axios.post("http://127.0.0.1:8888/api/v1/user",this.form)}}}}</script><stylescoped></style>

Axios 异常处理

  很多时候我们可能并没有从API 获取想要的数据。这可能是由于很多种因素引起的，比如axios 调用可能由于多种原因而失败，包括但不限于：
  • API 不工作了；
  • 请求发错了；
  • API 没有按我们预期的格式返回信息。
 可以使用catch异常处理这些问题。
模拟连接一个未存在的地址，前端给出提示：

<template><tableborder="1px"><thead><tr><td>ID</td><td>用户</td><td>邮箱</td><td>性别</td><td>地址</td></tr></thead><tbodyv-for="i in username":key="i.id"><tr><td>{{ i.id }}</td><td>{{ i.username }}</td><td>{{ i.email }}</td><td>{{ i.sex }}</td><td>{{ i.city }}</td></tr></tbody></table><buttontype="button"@click="getData">获取用户信息</button></template><script>exportdefault{name:"TestUser",data(){return{username:"",error:"获取数据失败,请稍后再试"}},methods:{getData(){this.$axios.get('http://127.0.0.1:8888/user.json1')//过去接口数据.then(response=>{this.username=response.data.data})//将获取到的数据赋值给.catch(error=>{
              console.log(error)alert(this.error)})}},created(){this.getData()}}</script><stylescoped>

Axios 全局默认值

  在开发中，几乎每个组件都会用到axios发起数据请求，如果每次都填写完整的请求路径，不利于后期维护。这时可以设置全局axios默认值。
在main.js里定义

axios.defaults.baseURL = 'http://127.0.0.1:8888' //设置全局默认值
axios.defaults.timeout = 5000 //设置5秒超时时间

在组件里直接写接口地址即可：

getData(){
        this.$axios.get('/api/v1/username') //直接写路径就可以了
            .then(response => {this.username=response.data.data})  
            .catch(error =>{
              console.log(error)
            alert(this.error)
            })
      }

Axios 自定义实例默认值

  有时候服务端接口有多个地址，就会涉及请求的域名不同、配置不同等，这时自定义实例可以很好解决。
1、创建src/api/test1.js文件

2、自定义实例

import axios from "axios";
const instance1 = axios.create({
    baseURL: "http://192.168.0.1",
    timeout: 5000
})
export default instance1 //暴露函数

3、全局main.js注册

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Test from "@/components/Test";
//import axios from "axios"; 原本注册的axios要取消
import axios from "./api/test1";

//createApp(App).use(router).mount("#app");
const app = createApp(App);
app.use(router).use(router).mount('#app');
app.component('Test', Test)
app.config.globalProperties.$test1=axios  //全局注册

4、组件使用

      getData(){
        this.$test1.get('/test/user') //原本的$axios改为新注册的$test1
            .then(response => {this.username=response.data.data})
            .catch(error =>{
              console.log(error)
            alert(this.error)
            })
      }

Axios 拦截器

拦截器可以拦截每一次请求和响应，然后进行相应的处理。
 请求拦截应用场景：
  • 发起请求前添加header
 响应拦截应用场景：
  • 统一处理API响应状态码200或非200的提示消息
  • 统一处理catch异常提示信息
请求/响应拦截示例：

import axios from "axios";
const instanceUrl = axios.create({
    baseURL: "http://127.0.0.1:8888",
    timeout: 5000
})
export default instanceUrl
instanceUrl.interceptors.request.use(config => {
    config.headers['testHeader'] = '123456'
    return config;
},error =>{
    //alert("请求接口失败")
    console.log("1111111")
    return Promise.reject(error)
})
instanceUrl.interceptors.response.use(response =>{
    return response;
}, error =>{
    console.log(error);
    return Promise.reject(error)
})