二次封装axios学习记录-- 基础版

1. 项目下面新建utils文件夹下新建request.js

import axios from 'axios'

// request是新建的axios实例，里面传配置对象。
const request = axios.create({
    baseURL:"http://localhost:3000", //这个是所有请求的前缀
    timeout:5000 //请求超时时间
})

export default request

3. 怎么使用上面的request呢，在要发请求的地方。

import request from '@/util/request.js'

//发请求
request({
    method:'GET',
    url:'/products',
    params:{
        
    } // 请求?后面的参数
})

4. 也可以封装发请求的方法，新建api文件夹，下面新建products.js，在这个文件中放关于product的请求。

import request from '../utils/request'

//如果参数可以不传的话，可以给参数设置默认值，比如params = {}
export function getProducts(params = {}){
// 这里一定要加return,getProducts返回值才是一个axios实例的promise对象。
  return request({
        method:'GET',
        url:'/products',
        params
    })
}

export function getProduct(id){
    return request({
        method:'GET',
        url:'/product/${id}'
    })
}

5. 在api下面再新建一个index.js文件。

import products from './products'

export default {
    products
}

6. 然后在main.js中，导入。

import api from './api'

Vue.prototype.$api = api 

7. 然后在发请求的地方。

this.$api.getProducts(里面传参)