2021-04-07 vue-cli4中axios写法参考

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了2021-04-07 vue-cli4中axios写法参考，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1313字，纯文字阅读大概需要2分钟。

内容图文

安装axios

npm install axios vue-axios --save

在main.js中导入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios)// 必不可少
app.mount('#app')

在.vue中使用

//get和delete
this.axios({
    url: '接口',
    method: 'get/delete',
    params: {//这边是params噢！！！！！！！
	    user: this.user//举个例子
    },
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})



//post或put类型     content-type:x-www-form-urlencoded
import qs from 'qs' //需要qs对data进行序列化
this.axios({
    url: '接口',
    method: 'post/put',
    transformRequest: [
    	function (data) {
        	//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
        }
    ],
    data: {//这边是data噢！！！！！！！
	    user: this.user//举个例子
    },
    headers:{
    	'Content-Type':'application/x-www-form-urlencoded'
    }
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})


//需要传文件的得用formData传参噢~~~~~~~~
//post或put类型     content-type: 'multipart/form-data;boundary=<calculated when request is sent>'

let formData=new FormData();
formData.append('user',this.user);

this.axios({
    url: '接口',
    method: 'post/put',
    data: formData//注意，这里没得花括号啦
    headers:{
    	'Content-Type': 'multipart/form-data;boundary=<calculated when request is sent>'
    },
}).then(
    (res) => {
      console.log(res);
}).catch((err) =>{
	  console.log(err)
})

      

内容总结

以上是互联网集市为您收集整理的2021-04-07 vue-cli4中axios写法参考全部内容，希望文章能够帮你解决2021-04-07 vue-cli4中axios写法参考所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---