vue封装Axios的get、post请求

2021-02-27 17:57:06 阅读：120 来源： 互联网

标签：axios vue 请求 err get url request Axios post

Axios 在vue项目中用的较多，每次都要写一遍很是不方便，尤其其中的config配置项是公用的，完全可以封装一下，这样下次再用就可以直接CV了！毕竟CV大法香啊！

封装 Axios 基础配置
创建一个request.is 文件，内容如下，我把解释性文字放在注释里了。

import axios from 'axios'


export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    // 设置基础的url配置项，这样接口处的url前面就不用写url:'http://127.0.0.1:8000/api/home'，直接写成 url:'/api/home', 就可以了
    baseURL: 'http://127.0.0.1:8000/', 
    //设置请求超时时间
    timeout: 5000 
  })

  // 2.axios的拦截器，用不到的可以忽略这节
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log('请求拦截err: '+err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
        console.log('响应拦截err: '+err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

封装网络请求。
我们可以将相关的网络请求都放在一个js中，这样再使用和修改的时候就方便查找了。其中get请求比较简单，post 的请求根据传对象输类型不同，要做不同设置。
现在来说说post请求常见的数据格式（content-type）
Content-Type: application/json ：请求体中的数据会以json字符串的形式发送到后端，这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置。
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
创建一个network.js 文件，内容如下：

// 导入封装好的Axios
import {request} from './request' //注意request.js的相对路径问题

//1. get请求---获取首页的多个数据
export function getHomeMultidata() {
  return request({
    url:'/api/home',
    method:'get',
    // 可以带参数也可以不带参数
    // params: {
    //     userName: 'Lan',
    //     password: '123'
    // }
  })
}
// 2.1 post请求---传输json数据时，获取电视剧多个数据
export function getTvshowMultidata() {
  return request({
    url:'/api/Tvshow',
     headers: {
      'Content-Type': 'application/json'
    },
    method:'post',
    data: {
        userName: 'Lan',
        password: '123'
     }
  })
}

//2.2 post请求---传输文件流,表单Form Data 数据时
export function getMovieMultidata() {
  return request({
    url:'/api/Movie',
    headers: {
    'Content-Type': 'multipart/form-data';
    },
    method:'post',
    data: {
        userName: 'Lan',
        password: '123'
     }
  })
}

vue中使用：
在script 标签中按需导入network.js 中需要使用的方法

  import {getHomeMultidata} from "network/home/network"; //导入js，路径自己根据文件位置设置

在方法中按照promise的格式调用函数即可

created() {
      // 在方法中调用函数即可
        getHomeMultidata().then(
          res => {
          // 此处res 为返回的数据，将返回的数据进行处理显示
            this.banners = res.homedata.slice(0,5)
            this.newestData = res.homedata.slice(5,12)
            
        ).catch(
          err => {
            console.log(err)
          }
        );
    },

network中的其他网络请求方法使用方法同上。

标签：axios,vue,请求,err,get,url,request,Axios,post
来源： https://blog.csdn.net/weixin_41897122/article/details/114180364

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue封装Axios的get、post请求