vue如何封装Axios的get、post请求

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)
}

// 导入封装好的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'
     }
  })
}

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

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

npm install axios -s //此方法会将axios下载到package.json中的"dependencies"模块中，大家可以自行查看

<script>
import axios from  ' axios'
</script>

export default{ 
created() {
 
      //get请求    
    axios.get("url", {
 
      params: { //此处为get请求传递的参数 但是一把get请求是没有参数的 params是固定的
          password: "123456",
         userName: "320621200305185129",
        },
      })
      
 
     .then(function (response) {
       console.log(response, 666666);
     })
     .catch(function (error) {
        console.log(error, 44444);
      });
      
  },
}
 
//post请求
axios.post('url', {
//此处是参数
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

import axios from 'axios'
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    // 设置基础的url配置项，这样接口处的url前面就不用写了
 
    baseURL: 'http://192.168.0.112:9518/', 基础代码
    //设置请求超时时间
    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)
}

import {request} from '../utils/request'
//get请求
 
export function denglu() {
  return request({
    url: 'login',
    method: 'get',
    params:{ //此处为传递的参数 //get请求一般是不传递参数的
        password:'123456',
        uerName:'5555555555'
    }
    // header: { // 已经在request.js里面进行全局设置，也可以在请求里面局部设置其他headers
    //    'Content-Type': 'text/plain'
    // }
  })
}
 //post请求
export function denglu() {
  return request({
    url: 'login',
    method: 'post',
    data:{ //此处为传递的参数
        password:'123456',
        uerName:'5555555555'
    }
    // header: { // 已经在request.js里面进行全局设置，也可以在请求里面局部设置其他headers
    //    'Content-Type': 'text/plain'
    // }
  })
}

<script>
import denglu from  "../api/index"
</script>