前端vue,如何使用axios实现接口的封装与调用

1，安装axios：在项目的控制栏里使用命令 npm install axios 安装axios

2，在src文件下新建一个axios文件

3，在axios文件下创建baseURL.js文件用于管理接口域名、创建api.js用于配置每个接口

4，在baseURL.js文件里面配置我们的域名：

import axios from 'axios'

const service = axios.create({
    baseURL: 'http://192.168.1.133:8080/api/',  //请求的地址
    timeout: 5000  //访问超时的时间
});

export default service;

5，在api.js文件里面配置我们的每一个接口：

import axios from './baseURL' // 引入刚刚创建的域名文件
const base = '/api';// 解决跨域问题
const api = {
    // post方法
    getLogin(params) {
        return axios.post(`${base}/login`, {params: params})
    },
    // get方法
    getUsersList(params) {
        return axios.get(`${base}/users`, {params: params})
    },
    // put方法
    getCar(id, state) {
        return axios.put(`${base}/users/${id}/state/${state}`)
    },
    // 如需传参数可以这样
    getPeople(id, state, params) {
        return axios.put(`${base}/users/${id}/state/${state}`, {params: params})
    },
};
export default api

6，使用接口（第一种方法）：

在需要使用接口的组件里：

import {要引入的方法名字} from ../axios/api.js

methods:{

        方法名({

        name：'张三',//向接口里面传递的数据，如果没有则不写

        age:'30',//向接口里面传递的数据，如果没有则不写

})

                 .then(res=>{ //成功的操作 })

                .catch(err=>{ //报错的操作});

}

7，使用接口（第二种方法）：

7.1在main.js文件里面

        import api from './axios/api.js'  //引入api.js文件
        Vue.prototype.$api = api  // 将api文件挂载到vue实例上，这样就可以不用每一个组件里都引用接口文件

7.2在需要使用的组件里：

methods:{

        this.$api.方法名()

                .then(res=>{ //成功的操作 })

                .catch(err=>{ //报错的操作});

}