Vue中Axios封装API接口详细方法

在Vue中常用用到接口，而必备的就是Axios,那怎么封装vue+AxiosAPI接口的思路及方法,下载提供详细的方法。

1、首先我们安装 axios

npm install axios;

2.新建一个文件http.js文件 和api.js文件 http.js文件来封装我们的axios，api.js用来统一管理我们的接口 *

3 http.js文件如下

//引入axios

import axios from "axios";

在我们开发项目的时候会有多种环境，就比如开发环境、测试环境、生产环境，使用axios.defaults.baseURL可以设置axios的默认请求地址。

// 设置默认路径

if (process.env.NODE_ENV == "development") {
    axios.defaults.baseURL = "http://120.53.31.103:84/"
}
if (process.env.NODE_ENV == "production") {
    axios.defaults.baseURL = "https://wap.365msmk.com/"
}

// 通过axios.defaults.timeout设置默认的请求超时时间。如果超出了响应时间，就会告知用户当前请求超时，请刷新等等

axios.defaults.timeout = 10000;

设置接口请求拦截

axios.interceptors.request.use(
	config => {
		config.headers = { DeviceType : 'H5' } //设置响应头部
		return config
	}
)

// **使用promise返回axios 请求的结果 promise

//get**

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err);
        })
    })
}

post

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })

axios的封装基本已经完成了 下面介绍一下api的统一管理

1首先我们在api.js文件中引入我们封装好的get和post方法

import { get, post } from './http'
//使用get请求请求下我们的接口 api/app/recommend/appIndex
export function getAppIndex() {
    return get("api/app/recommend/appIndex")
}

2、在home.vue中引入api

import { getAppIndex } from "../api";

//使用 注意asyns 和await 必须同时去使用不然会报错导致接口用不了

 async mounted() {
    var res = await getAppIndex();
    if (res.data.code == 200) {
    console.log(res.data.data);
    } 
    
  },

如果需要传参的话 先在 home.vue中把 参数以对象的形式放在curriculum（参数）里面

methods(){
 screen() {
      var obj = {
        page: 1,
        limit: 10,
        is_vip: 0,
      };
      curriculum(obj).then((res) => {
        console.log(res);
      });
    },
}

2，在api.js 里面把参数写在后面就可以呀

export function curriculum(obj) {
    return get("api/app/courseBasis", obj)
}