在vue项目中安装和使用axios

1.axios是啥
axios 是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。简单的理解就是ajax的封装
它本身具有以下特征:
(1)从浏览器中创建 XMLHttpRequest;
(2)从 node.js 发出 http 请求;
(3)支持 Promise API;
(4)拦截请求和响应;
(5)转换请求和响应数据;
(6)取消请求;
(7)自动转换JSON数据;
(8)客户端支持防止 CSRF/XSRF;
2.vue中的axios安装两种方法
2.1使用npm安装

npm install axios --save

2.2使用cdn安装

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.使用axios之post

 import axios from 'axios';
 axios.defaults.baseURL = '/api';//配置的地址,千万不能落下
 let params  = new URLSearchParams();
            params.append('name',"value");
            params.append('name2',"value2,value3");
            axios({
                url: '/地址',
                method: 'POST',
                responseType: 'json',
                data: params,
                headers: {"Content-Type": "application/x-www-form-urlencoded","Accept": "text/html, */*"},
            }).then(function (result) 

注意:由于是在VUE中使用的,若设计到跨域问题,需要配置vue.config.js文件,例如:

devServer: {
         proxy: {
             '/api':{
                 target:'目标地址',
                 changeOrigin:true,
                 pathRewrite:{
                     '/admin':'和上面写一样 目标地址'
                 }
             },
         }

使用axios之get
换一种写法

import axios from 'axios';
    axios.defaults.baseURL = '/api';
    export default {
        name: "test",
        data(){
          return{}
        },
        methods:{
            getData(){
                axios.get('/地址',{
                    params:{
                        name:value
                    }
                    }
                ).then( (result)=>{
                    console.log(result);
                }).catch(function (error) {
                    console.log(error);
                });
            },
        },
     }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值