axios如何封装请求以及content-type的配置

content-type的三种常见数据格式

• 1、application/x-www-form-urlencoded（表单方式）
• 2、application/json（JSON方式）
• 3、multipart/form-data（文件方式）

axios默认用的是application/json
格式：
{
    name:xxx,
    age:xxx
}
而multipart/form-data和application/x-www-form-urlencoded格式是 
name=xxx&age=xxx，
因此需要序列化，可以使用axios自带的qs去序列化data

//当接口比较少时，我们可以直接配置
import axios from 'axios'
import qs from 'qs'

//一、application/json，axios默认是application/json，因此headers可以不配置

//方式一
axios.post(url, data)
axios.post(url, data, {headers: {'Content-Type': 'application/json'}})

//方式二
export function getHome(data) {       
    return request({
      url: '/login',
      method:'post',
      data
    })
  }
export function getHome(data) {       
    return request({
      url: '/login',
      method:'post',
      headers: {'Content-Type': 'application/json'},
      data
    })
  }


//二、application/x-www-form-urlencoded
//方式一
axios.post(url,  qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})

//方式二
  export function getAbout(data) {       
    return request({
      url: '/login',
      method:'post',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data：qs.stringify(data)
    })
  }
  
  //三、multipart/form-data，可以在配置的时候通过qs序列号data，也可以在传参时通过new FormData()进行传参
  
  //方式一
   export function getData(data) {       
    return request({
      url: '/login',
      method:'post',
      headers: {'Content-Type': 'multipart/form-data'},
      data：qs.stringify(data)
    })
  }
  
  //方式二,在页面调接口时配置
  let params = new FormData() 
  params.append('file', this.file) 
  params.append('qq', this.qq) 
  params.append('weChat', this.WeChat) 
  
  axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(
  res => { 
     if (res.data.code === 200) { 
           this.dataList = res.data.rows
   }).catch(
     () => { 
      this.$notify.error(res.data.message)
   })

封装请求

//封装请求,在scr下新建一个netWork文件夹，新建一个request.js文件
import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
     baseURL:  "http://127.0.0.1:3000",                       
     //headers: { "Content-Type": "application/x-www-form-urlencoded" },              
     timeout: 3000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    config.headers['token'] = store.getters.token
    return config
  }, error => {
    console.log(error);
    return Promise.reject(error)
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
   if (res.data.code === 200) {
      return res
    }
  }, error => {
    console.log(error);
    return Promise.reject(error)
  })

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

//然后新建一个js文件用来存放接口，最后是一个页面或者一个小模块的接口放在同一个js文件中
import request from './request'
import qs from 'qs'

// 获取xxx列表
export function teacherList(data) {
  return http({
    url: '/teacher/list',
    method: 'post',
    data
  })
}

// 获取xx列表
export function getDeptList() {
  return http({
    url: '/index/getDeptList',
    method: 'post'
  })
}

//获取xxx数据
export function getHome (data) {        
    return request({
      url: '/index/home',
      method:'post',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data:qs.stringify(data)
    })
  }