vue工程化管理axios

1.创建vue项目并配置安装json-server插件

npm install json-server -g

安装完成后在vue项目的根目录添加一个db.json文件，并在其中加入json数据

进入vue项目目录并执行

json-server db.json

在游览器输入对应api地址就可以拿到相应的数据了

2.工程化管理axios文件

axios的基本使用

给项目安装axios插件

npm install --save axios vue-axios

引入axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在组件中使用axios请求刚才我们写的json数据

<template>
  <div class="hello">
      <button @click="getdata">获取axios数据</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    getdata(){
      this.axios.get('http://localhost:3000/student').then(val=>{
        console.log(val);
      })
    }
  },
}
</script>

请求成功

因为这里都是写死的，在开发较大的项目时，大量的api是不好管理的，所以需要进行api的统一管理，使得视图层和控制层分离操作。

axios的配置文件管理

在src目录下面建一个api目录并在下面建相应的文件

api.config.js

//该文件作为统一管理api的前缀地址和axios的超时时间
const config = {
    baseURL: 'http://localhost:3000',
    timeout: 2000,
}
export default config

net.js

//该文件是对axios的封装
import axios from 'axios';
import config from './axios.config';

//创建一个axios实例
const instance = axios.create(config)

export default instance

studentinfo.js

//该文件是统一管理api地址的后缀
const studentApi = {
    studentinfo: 'student'
}

export default studentApi

api.js

//该文件可以对api接口上的文件做增删改查的操作
//也就说本文件是前端拿后端数据和前端向后端传数据的文件
import instance from "./net";
import studentApi from "./student/studentinfo";

function getStudent() {
    return instance.get(studentApi.studentinfo)
}

// export {
//     getStudent
// }
export default getStudent

有了这几个配置文件之后main.js中对axios的导入就不需要了

在组件中就只需导入api就可以获取数据了

<template>
  <div class="hello">
      <button @click="getdata">获取axios数据</button>
  </div>
</template>

<script>
import getStudent from '../api/api'
export default {
  name: 'HelloWorld',
  methods: {
    getdata(){
      // this.axios.get('http://localhost:3000/student').then(val=>{
      //   console.log(val);
      // })
      getStudent().then(val=>{
        console.log(val);
      })
    }
  },
}
</script>

这里做一个区别 export和export default

使用export，导入时需要解构

export {
    getStudent
}

import  { getStudent } from '../api/api'

使用export default就不需要解构

export default getStudent

import getStudent from '../api/api'

axios向后端传值/插入数据到json

在db.json中增加一组数据,注意在courses对象中要加id，不然插入数据不能自增

{
  "student": [
    {
      "name": "七七",
      "age": 18
    },
    {
      "name": "可莉",
      "age": 18
    },
    {
      "name": "可莉",
      "age": 18
    }
  ],
  "courses": [
    {
      "name": "语文",
      "time": 10,
      "id": 1
    },
    {
      "name": "数学",
      "time": 10,
      "id": 2
    },
  ]
}

net.js

//该文件是对axios的封装
import axios from 'axios';
import config from './axios.config';

//创建一个axios实例
const instance = axios.create(config)
export default instance

axios.config.js

//该文件作为统一管理api的前缀地址和axios的超时时间
const config = {
    baseURL: 'http://localhost:3000',
    timeout: 2000,
}
export default config

studentinfo.js

//该文件是统一管理api地址的后缀
const studentApi = {
    student: 'student',
    courses: 'courses'
}

export default studentApi

api.js

//该文件可以对api接口上的文件做增删改查的操作
//也就说本文件是前端拿后端数据和前端向后端传数据的文件
import instance from "./net";
import studentApi from "./student/studentinfo";

async function getStudent() {
    let tempStudent = await instance.get(studentApi.student)
        //将student的所有年龄变为10岁
    tempStudent.data.forEach(element => {
        element.age = 10
    });
    return tempStudent.data
}

//添加一条数据/向后端传一条数据
async function addCourse(data) {
    if (!(typeof data === 'object')) {
        throw new Error('请传入一个对象数据')
    }
    console.log(data);
    let temp = await instance.post(studentApi.courses, data)
        // temp.data.time = 5
    return temp.data
}


export {
    getStudent,
    addCourse
}
// export default getStudent

<template>
  <div class="hello">
      <button @click="getdata">获取axios中student的数据</button>
      <button @click="adddata">添加一条student的数据</button>
  </div>
</template>

<script>
import {getStudent,addCourse} from '../api/api'
export default {
  name: 'HelloWorld',
  data() {
    return {
      newCourse:{
        name:'英语',
        time:30,
      },
    }
  },
  methods: {
    getdata(){
      // this.axios.get('http://localhost:3000/student').then(val=>{
      //   console.log(val);
      // })
      getStudent().then(val=>{
        console.log(val);
      })
    },
     async adddata(){
      let res=await addCourse(this.newCourse)
     console.log(res);
    }
  },
}
</script>

axios拦截器的使用

net.js

//该文件是对axios的封装
import axios from 'axios';
import config from './axios.config';

//创建一个axios实例
const instance = axios.create(config)

instance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    console.log(config);
    if (config.data) {
        if (config.data.name === '英语') {
            return Promise.reject('不能插入英语课程')
        }
    }
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});


// 添加响应拦截器
instance.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

3.案例源码

案例源码