Vue 安装 axios 和使用_vue安装并使用axios

1最开始一直提示400错误，根据下面的测试可成功安装

1、查看代理设置执行，不为null时设置为空：
npm config get proxy
npm config get https-proxy
如果返回值不为null，继续执行：
（这一步很重要，一定要保证两个命令的返回值都为null）
npm config set proxy null
npm config set https-proxy null
2、执行：
npm config set registry http://registry.cnpmjs.org/

2安装axios

npm install axios

3.设置代理服务器，可发送请求和解决跨域问题，跨域可通过（cors,jsonp,代理服务器）现在通过cli的代理服务器实现ajax请求。

   一般使用多个后台实现方式。

vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  //使用cli 脚手架 配置一个代理服务器 可解决跨域问题。
  //一个后台源
   devServer: {
     proxy: 'http://localhost:1230'
   }
  //多个后台源
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:1230',
        pathRewrite:{'^/api':''},//替换路径中的/api
        ws: true,
        changeOrigin: true,//高速服务器请求的端口号是真的还是
      },
      '/foo': {
        target: 'http://localhost:1230'
      }
    }
  }
 
})

发送请求

<script>
import f from '@/Content/php'//默认暴露
import axios from 'axios';//引用axios
export default {
  name: 'myMsg',
  data() {
    return { Message: '' };
  },
  methods: {
    GetStudents:function(){
        f.funHello1('php');
        f.funHello2('张三');
    },
    Getaxiosfun:function(){
        //使用axios
        axios.get('http://localhost:8080/api/Home/GetStudents').then(
            response=>{alert(this.Message=response.data)},//成功回调
            error=>{alert(this.Message=error.message)},//失败回调
        );
    }
  },
};
</script>

Post

Postaxiosfun:function(){
        //使用post
        axios.post('http://localhost:8080/api/Home/GetStudents2',{name:'0123456'}).then(
            response=>{
                alert(this.Message=response.data)
            },//成功回调
            error=>{
                alert(this.Message=error.message)
            },//失败回调
        );
    }

c#接口

 [HttpGet]
        public string GetStudents(string name) {
            return 'get:' + name;
        }
        [HttpPost]
        public string GetStudents2(string name)
        {
            return 'post:'+name;
        }