axios使用方法

小灰灰 2023-06-07 05:47 8阅读 0赞

# axios使用方法 #

axios相当于ajax，对后端发起请求，获取数据

## 下载 ##

系统已经安装nodejs和npm包管理后，可以直接安装  
在当前工作目录下  
`npm init --yes` 将包管理导入到这个项目中  
`npm install axios -S` 安装axios

## 使用 ##

直接script导入  
`<script src="./node_modules/axios/dist/axios.js"></script>`

## 示例 ##

使用python的flask作为后端  
server.py

#! /usr/bin/env python
    # -*- coding: utf-8 -*-
    # Date: 2018/6/5
    
    # 1.pip3 install Flask
    # 2.python3 server.py
    import json
    
    from flask import Flask
    from flask import request
    from flask import Response
    
    app = Flask(__name__)
    
    # 默认是get请求
    @app.route("/")
    def index():
        resp = Response("<h2>首页</h2>")
        resp.headers["Access-Control-Allow-Origin"] = "*"
        return resp
    
    
    @app.route("/course")
    def courses():
    
        resp = Response(json.dumps({
            "name": 'alex'
        }))
        resp.headers["Access-Control-Allow-Origin"] = "*"
    
        return resp
    
    
    @app.route("/create", methods=["post", ])
    def create():
        print(request.form.get('name'))
    
        with open("user.json", "r") as f:
            # 将数据反序列化
            data = json.loads(f.read())
    
        data.append({"name": request.form.get('name')})
    
        with open("user.json", "w") as f:
            f.write(json.dumps(data))
    
        resp = Response(json.dumps(data))
    
        resp.headers["Access-Control-Allow-Origin"] = "*"
    
        return resp
    
    
    if __name__ == '__main__':
        app.run(host="localhost", port=8800, )

开启后端，然后再开启前端

### get方法使用 ###

`axios.get(url).then(ret=>{}).catch(err=>{})`  
`get`方法传入`url`，`then`里面传入接受到数据的回调函数，`catch`接受返回错误时的回调函数

### post方法使用 ###

`axios.post(url,params).then(ret=>{}).catch(err=>{})`  
`params`是一个数据对象

var params = new URLSearchParams();
    params.append('name','xiaoming');

通过`append`向里面传入键值对，传入要发送的信息

### 示例 ###

<div id="app"></div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
    <script>
    //可以将axios挂载到vue中
    Vue.prototype.$axios = axios;
    //可以配置设置公共url
    axios.defaults.baseURL = 'http://127.0.0.1:8800'
    var Vmain = {
        template:`
        <div>
        主页面
        <button @click='sendGet'>点我发送get方法的数据</button>
        <button @click='sendPost'>点我发送post方法的数据</button>
        <div v-html="msgGet"></div>
        <div v-html="msgPost"></div>
        </div>
        `,
        data(){
            return {
                msgGet:'',
                msgPost:'',
            }
        },
        methods:{
            sendGet(){
                //等价于http://127.0.0.1:8800
                this.$axios.get('/')
                .then(ret=>{
                    //箭头函数，用ret参数接受服务器变量
                    console.log(ret);
                    this.msgGet = ret.data;
                })
                .catch(err=>{
                    //当服务器错误时，用err接受错误信息 
                    console.log(err);
                })
            },
            sendPost(){
                //使用URLSearchParams创建一个数据对象，向对象里append键值对
                var params = new URLSearchParams();
                params.append('name','xiaoming');
                this.$axios.post('/create',params)
                .then(ret=>{
                    this.msgPost = ret.data;
                })
                .catch(err=>{
                    console.log(err);
                })
            }
        }
    }
    new Vue({
        el:'#app',
        template:`<Vmain />`,
        components:{
            Vmain,
        }
    })
    </script>