Vue中Axios封装API接口的思路及方法

1、首先我们安装 axios

npm install axios; // 安装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) }