Vue中封装Axios网络请求

Vue中封装Axios网络请求

前言

在写前后分离式系统的时候避免不了向后端请求数据，请求的地址不一样，需要得到的数据也不一样，就比如我们在页面加载的时候会需要一些后台的数据来渲染页面，我们需要访问一次后台，在我们点击添加或者删除按钮的时候还需要请求后台数据，这时候我们又要请求后台。传统的请求是这样的…

axios({
  method: 'post',
  url:后台地址+ '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

我们可以看出来我们每一次请求都需要加上后台地址，而且都需要加上method请求方式，这样对于我们开发来说也可以，但是想到如果后期后台端口或者地址改了，或者说请求的地址改了，我们不可能一个一个去该地址和端口吧，所以这就说到网络请求的封装了。直接上代码。

封装Axios网络请求

1、在我们的项目目录下执行这条命令，下载axios

npm install axios

2、在项目下创建utils目录，在utils下创建一个config.js文件

这里我们可以单独的把后台地址导出，在之后的修改和查看的情况下我们一目了然

export const BASE_URL= '后台地址'

3、在项目下创建utils目录，在utils下创建一个request.js文件

import axios from 'axios'; // 引入axios
axios.defaults.timeout = 10000;  
// 封装get方法和post方法
//axios.get()方法的第二个参数是一个{}，这个对象的params属性值是一个参数对象
export function get(url, params){
  return new Promise((resolve, reject) =>{
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err =>{
      reject(err.data)
    })
  });
}
//axios.post()方法的第二个参数是给后端串的一个json对象，后端应该使用@RequestPream来接收
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(res => {
        resolve(res.data);
      })
      .catch(err =>{
        reject(err.data)
      })
  });
}

这里我也就封装了get、post请求，毕竟是常用请求就这两个。

4、在项目下创建utils目录，在utils下创建一个api.js文件

api.js下主要是封装了我们请求的方法，这里可以看到user，这个user就是向后台请求的参数，如果请求后台不需要参数我们可以为空像这样：

select: () => post(BASE_URL + '/edit/selectMarkdown'),

这里edit接收的可以是一个或多个，但是在封装的方法中我们只需要写一个参数就行

导入我们创建的get、和post方法

import {get,post} from './request';
import {BASE_URL} from "./config";
export const HttpManager = {
  addEdit: (edit) => post(BASE_URL + '/edit/add', edit),
}

5、页面中使用封装好的请求

下面这段代码就是无参的请求方式，我们可以看到没有参数我们圆括号中什么都没写直接去.then的。

HttpManager.selectBlog().then(res=>{
        for (let i=0;i<res.data.length;i++){
          this.tableData.push(res.data[i])
        }
      }).catch(err=>{
        console.log(err);
      })

我就以添加为例，这样大家也可以看的清除，这里可以看到花括号里的就是后台接收的参数。

HttpManager.addEdit({
            blog_title : formName.title,
            blog_explain : formName.explain,
            markdown_content : that.blogInfo.blogContent,
            create_date : create_date,
            classify_id : formName.classify,
            watch_count : 0,
            tags : null
          }).then(res=>{
            this.$message({
              message: '发布成功',
              type: 'success'
            });
            this.$router.push('/SystemCount')
          }).catch(err=>{

          })

结语

相信大家也看明白了，最后祝大家学习进步，工作顺利啦。