Vue项目中如何使用Axios封装http请求详解

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, params={}, headers={}){
 return new Promise((resolve, reject) => {
 axios.get(url,{
  params: params,
  headers: headers
 })
 .then(response => {
  resolve(response.data);
 })
 .catch(err => {
  reject(err)
 })
 })
}

6.再封装一个post方法：

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url, data = {}){
 return new Promise((resolve, reject) => {
  axios.post(url, data)
  .then(response => {
  resolve(response.data);
  }, err => {
  reject(err)
  })
 })
 }

使用

在main.js中引入：

import {post,get} from './utils/http'
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;

在组件中使用：

this.$post(url, params)
 .then((res) => {
 if (res.result === 'success') {
  this.$message({
  message: '登录成功！',
  type: 'success'
  })
  this.$router.push('/main')
 } else {
  this.$message.error(res.msg)
  this.refreshCode();
 }
 });

这段代码是用户登录发送post请求的代码示例，其他get请求也是一样的处理方式。接下来我们会有文章具体讲解如何使用封装好的axios实现登录的例子，敬请关注。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。