介绍

我在使用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)

                    });

巴特西

axios简单使用

介绍

Get，Delete，Head简单使用

Post,Put,Patch简单使用

最新文章

热门文章