axios簡單使用

介紹

我在使用vue的時候使用到了axios,vue 1.0的版本作者推薦使用vue-resource,到了vue 2.0作者建議使用axios,此篇文章只是我在使用axios時候做的筆記，我遇到的一個些坑，如需查看axios詳細api的使用文檔請看官網https://www.npmjs.com/package/axios

Get，Delete，Head簡單使用

get(url: string, config?: AxiosRequestConfig): AxiosPromise;
delete(url: string, config?: AxiosRequestConfig): AxiosPromise;
head(url: string, config?: AxiosRequestConfig): AxiosPromise

這三個方法使用方式屬於同一類型，Get方法使用示例如下，其他兩個同理

// Make a request for a user with a given ID 
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// Optionally the request above could also be done as 
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Post,Put,Patch簡單使用

post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;
put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;
patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;

這三個方法使用方式屬於同一類型，Post方法使用示例如下，其他兩個同理：

 axios.post(url,JSON.stringify(requestdata),{ headers: { 'Content-Type': 'application/json' },data:{}}).then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

這里需要注意的是data:{} 必須添加這個，即使data里面是空,headers是添加http表頭的

axios post上傳表單的時候，需要注意的是 headers: { 'Content-Type': 'application/x-www-form-urlencoded'  這個值，否則后台是接收不到值的

 var formData = new FormData();
 formData.append('file', this.$refs.fileData['files'][0], this.$refs.fileData['files'][0].name);
 formData.append('applicationName', this.form.applicationName);

 axios.post(url, formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
                    .then(response => {
                        console.log(res.data)
                    })
                    .catch(error => {
                        console.log(error)
                    });