一、vue的接口封装：
1. 引入axios封装方法（config.js）
2. 封装接口(userApi.js)，代码如下：
import request from './config.js' export function userData(data){ return request({ url:'您的url地址', method:'get', data:data }) }
3. 在vue文件使用这个封装方法。（user.vue），代码如下：
import { userData } from '../../api/userApi.js'getAllUser() { let token = sessionStorage.getItem('token') let header_token = { Authorization: "bearer " + token } userData({header_token}).then(res => { console.log("获取用户详情", res); }) }// 注意：这里导入只能是import { userData,方法名1,方法名2 } from '../../api/userApi.js',不能使用 import 自定义名字 from '../../api/userApi.js// 再次注意：下面使用的时候只能是：方法名(data).then(res => {}).catch(err => {}) 不能使用自定义名字.方法名二、post，get，delete，put方法封装
1.文件名字为：config.js，代码如下：
`/ 引入axios
import axios from 'axios'
// 引入qs
import qs from 'qs'
// 封装 get, post, delete, put方法
/**• get方法，对应get请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
/
export function get(url, params){
return new Promise((resolve, reject) => {
axios.get(url, {
params:params
}).then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
}).catch(err => {
reject(err.data);
// Loading.service(true).close();
// Message({message: '加载失败', type:'error'});
})
})
}
/*• post方法，对应post请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'});
})
});
}
/*• post方法，参数序列化
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
/
export function qspost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(params))
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'});
})
});
}
/*• put方法，对应put请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
/
export function put(url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'});
})
});
}
/*• delete
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
*/
export function deletefn(url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '请求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
// Message({message: '加载失败', type: 'error'});
})
});
} 2.在其他文件(user.js)里面导入上面的四个请求，代码如下：// 引入封装好的方法
import { get, post, qspost, put, deletefn } from './config.js'
// 这是为了模块化，比如登录模块，注册模块，购物车模块在这个文件里面，到时候如果需要登录模块，就可以直接引用这里面的方法
export const getAllUser = data => post("url", data) 3.最后在vue文件里面使用模块化代码，代码如下：import {getAllUser} from '../../api/user.js'
let header_token = {
Authorization: "bearer " + token
}
getAllUser(header_token).then(res => {
console.log("获取用户详情", res);
})`三、vue里面的axios封装，代码如下：
`// 引入axios
import axios from 'axios'// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 创建一个axios实例
const service = axios.create({
// 请求超时时间
timeout: 3000,
// baseURL: 'http://'
// baseURL : '/oauth'
// baseURL : '/'
})// 添加请求拦截器
service.interceptors.request.use(config => {
//config是axios配置对象
// 在发送请求之前做些什么
//每次发送请求前都会进入此拦截器处理函数，可以在此处统一携带上token，每次请求都会自
// config.headers.common['token'] = localStorage.getItem(“token”);
let token = window.sessionStorage.getItem('token')
config.headers.common['Authorization'] = 'bearer '+token;
console.log("config是axios配置对象", config)
return config;
},
err => {
// 对请求错误做些什么
console.log("请求出错的处理函数", err);
return Promise.reject(err)
}
)// 添加响应拦截器
service.interceptors.response.use(function(response){
// 对响应数据做点什么
//收到响应后，可以先统一处理错误码
// switch (res.data.code) {
// case 10001: alert(‘非法操作’);
// router.push({path: '/});
// case 10002: alert(‘权限不足’);
// ......
// }
let res={}
res.status = response.status
res.data = response.data
return res
},function(err){
// 对响应错误做点什么
//响应出错进入的函数
console.log("请求出错的处理函数",err);
return Promise.reject(err)
})export default service`四、vue的get请求的四种方法
1. 方法一：
最基础的方式，get请求可以直接在url后面用?来把参数直接带上去(只有get自带的特殊的方式)
2. 方法二：
最通用的方式，不论是get请求，还是post请求，或者是delete请求，亦或者是put请求都可以用，直接是用this.$http.请求方式('url',{参数},headers),当然其中还是有区别的，但是框架都差不多的。 其中的区别是：get请求：this.$http.get('url', {params:{id:1, name:"lili"}).then(res=>{}).catch(err=>{}) post请求：this.$http.post('url', {id:1, name:"lili"}).then(res=>{}).catch(err=>{}) put请求：this.$http.put('url', {id:123, name:"lili"}).then(res=>{}).catch(err=>{}) delete请求：this.$http.delete('url', {id:12345}).then(res=>{}).catch(err=>{}) 我这知识写了他们在vue方法之间的区别，其他的区别以后再说，比如什么简单请求，复杂请求需要option预检，post请求发起的跨域问题等等一些问题
3. 方法三：
这个方法是对vue里面的axios，get请求，还是post请求，或者是delete请求，亦或者是put请求 等都进行封装处理的，然后再进行调用的[封装方法见我的其他文章]
4. 方法四：
这个方法也是对vue进行封装的，但是只是对接口和axios进行了封装，没有对请求方式进行封装处理(个人建议用第四种方法)[封装方法见我的其他文章]// 方法一 // this.$http.get('http://172.26.92.85:10030/user/detail/aaa?Authorization=bearer ' + token).then(res => { // console.log("获取用户详情", res); // if (res.data.code == 200) { // this.$message('获取用户详情成功') // } else( // this.$message('获取用户详情失败') // ) // }).catch(err => { // this.$message('获取用户详情失败') // }) // 方法二 // this.$http.get('http://172.26.92.85:10030/user/detail/aaa', { // Authorization: "bearer " + token // }).then(res => { // console.log("获取用户详情", res); // }) // 方法三 let header_token = { Authorization: "bearer " + token } // getAllUser(header_token).then(res => { // console.log("获取用户详情", res); // }) // 方法四 userData({header_token}).then(res => { console.log("获取用户详情", res); })
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
