axios代码的封装

Question

以下是我修改后封装的代码
public.js

import axios from 'axios'

axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
axios.defaults.headers['Content-Type'] = 'application/json'
// axios.defaults.headers['Authorization'] = 'JWT '+localStorage.getItem('token')


export default {
  fetchGet(url, params = {}, config = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params, config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPost(url, data = {}, config = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data, config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchDelete(url, data = {}, config = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, data, config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  fetchPut(url , data = {}, config = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url , data, config).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

index.js

import http from './public'

...
//修改购物车地址功能  
export const changeaddress = (params,config)=>{  
  return http.fetchPut('address/'+params+'/',config)  
}

我的修改购物车的组件
以下代码是可行的

        axios({
          method: 'put',
          url:'http://127.0.0.1:8000/address/'+ this.id +'/',
          data:{
            id:this.id,
            province:CodeToText[FormName.selectedOptions[0]],
            city:CodeToText[FormName.selectedOptions[1]],
            district:CodeToText[FormName.selectedOptions[2]],
            address:FormName.detail,
            signer_name:FormName.username,
            signer_mobile:FormName.phone
          },
          headers:{
            'Authorization' : 'JWT '+localStorage.getItem('token')
          },
          timeout:1000
        }).then(res=>{
          console.log(res)
        }).catch(error =>{
          console.log(error)
        })

但是我想用我封装的put请求，但是会一直显示401没有传入token进去
这个是我错误的代码

changeaddress(this.id,{
    data:{
      id:this.id,
      province:CodeToText[FormName.selectedOptions[0]],
      city:CodeToText[FormName.selectedOptions[1]],
      district:CodeToText[FormName.selectedOptions[2]],
      address:FormName.detail,
      signer_name:FormName.username,
      signer_mobile:FormName.phone
    },
    headers:{
      Authorization : 'JWT '+localStorage.getItem('token')
    }
}).then(res=>{
    console.log(res)
}).catch(error=>{
  console.log(error)
})

请问我的put请求的代码要如何重新封装呢，哈哈哈，vue的小白求各位大佬帮忙解答一下，这个真的困扰了我一下午

Answer 1

public.js

fetchPut(url ,params, data = {}, config = {}) {  
  return new Promise((resolve, reject) => {  
    axios.put(url , params , data, config).then(res => {  
      resolve(res.data)  
    }).catch(error => {  
      reject(error)  
    })  
  })  
}

index.js

//修改收货地址  
export const changeaddress\=(params,data,config)=>{  
  return http.fetchPut('address/'+params+'/',data,config)  
}

修改购物车的组件

changeaddress(this.id, {  
    id: this.id,  
  province: CodeToText\[FormName.selectedOptions\[0\]\],  
  city: CodeToText\[FormName.selectedOptions\[1\]\],  
  district: CodeToText\[FormName.selectedOptions\[2\]\],  
  address: FormName.detail,  
  signer\_name: FormName.username,  
  signer\_mobile: FormName.phone  
  },  
  {  
    headers: {  
      Authorization: 'JWT ' \+ localStorage.getItem('token')  
    }  
  }).then(res => {  
  console.log(res)  
}).catch(error => {  
  console.log(error)  
})

这个是可以用put请求的

Answer 2

fetchPut封装得不太好, 照你的封装第二个参数一定是data, 而你传的是config.丢失了axios本身的灵活。
即然封装了那就得按你封状后的代码来调用.

// 照你的封装代码应该需要这么调用
changeAddress(this.id, {
      id:this.id,
      province:CodeToText[FormName.selectedOptions[0]],
      city:CodeToText[FormName.selectedOptions[1]],
      district:CodeToText[FormName.selectedOptions[2]],
      address:FormName.detail,
      signer_name:FormName.username,
      signer_mobile:FormName.phone
}, {
 headers:{
      Authorization : 'JWT '+localStorage.getItem('token')
    }
});

//或者
changeaddress(this.id,{},{
    data:{
      id:this.id,
      province:CodeToText[FormName.selectedOptions[0]],
      city:CodeToText[FormName.selectedOptions[1]],
      district:CodeToText[FormName.selectedOptions[2]],
      address:FormName.detail,
      signer_name:FormName.username,
      signer_mobile:FormName.phone
    },
    headers:{
      Authorization : 'JWT '+localStorage.getItem('token')
    }
}).then(res=>{
    console.log(res)
}).catch(error=>{
  console.log(error)
})

犀利一笑^_^