后台管理之axios

axios在vuecli3中应用

axios是将ajax封装好的一个对象,方便开发.
1.安装
此处省略
2.如何使用
在main.js中
//原型不足

import  axios from 'axios'
//baseUrl是十分重要的,开发中避免硬编码
axios.defaults.baseURL=''
//方便调用axios

Vue.prototype.$http=axios

在项目开发中注意使用的请求方式是get,post,以及请求头(此处)
//http不足

 //post方式
 //形式1
 await this.$http({
        method: "post",
        url: "/attachment/upload/queryAttachmentList",
        data: {
          menuId: this.menuId,
        },
      });
//形式2
await this.$http.post('url',{ menuId: this.menuId,})      

axios将请求头设置为默认是application/json形式,无需去做json格式转化*
文件上传
//如果是上传文件的话需要添加请求头格式,使用formData表单对象将文件进行上传

   let formData = new FormData();
      formData.append("file", fileobj.file);
      formData.append("menuId", this.menuId);
      formData.append("attName", this.attName);
      formData.append("fileType", this.fileName.name);
      formData.append("status", this.fileTimeType);
      //  fileTimeType
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      const res = await this.$http.post(
        "/attachment/upload/file",
        formData,
        config
      );

可以观察请求发送的情况,如果是post方式发送表单的话

如果是post方式的话