axios使用方法

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>