Vue2从0到1(五)：使用nodejs+koa2和axios实现前后台数据通信

摘要：前面讲了环境的搭建用打包的使用的使用以及组件化及组件间传值下面讲一下使用提供接口，访问接口，前后端数据通信的相关内容。

npm install koa koa-router --save-dev

在根目录下下新建server/index.js文件index.js:

    const Koa = require("koa");
    const router = require("koa-router")();
    const app = new Koa();
    router.get("/", (ctx, next)=> {
        ctx.response.body = "111"
    });

    app
        .use(router.routes())
        .use(router.allowedMethods());

    app.listen(3000,()=>{
       console.log("server is start at port 3000")
    });
    

package.json里面设置命令:"server":"node server index.js"
启动服务:npm run server
浏览器里面访问localhost/3000可看到返回值

使用koa2-cors设置跨域
安装npm install koa2-cors --save-dev

   ...
    app.use(cors({
        origin: function (ctx) {
            if (ctx.url === "/test") {
                return false;
            }
            return "http://localhost:9001";
        },
        exposeHeaders: ["WWW-Authenticate", "Server-Authorization"],
        maxAge: 5,
        credentials: true,
        allowMethods: ["GET", "POST", "DELETE"],
        allowHeaders: ["Content-Type", "Authorization", "Accept"],
    }));
    ...

安装axios：

   npm install axios --save

在根目录新建server/request.js
封装一个request函数，所有的请求都通过request函数,便于对于请求统一处理

   export default {
    post(url, data) {
        return axios({
            method: "post",
            baseURL: BASE_URL,
            url,
            data: JSON.stringify(data),
            timeout: 10000,
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                "Content-Type":"application/json",
                // "Accept": "application/json",
                // "charset":"utf-8"
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
            ).then(
            (res) => {
                return checkCode(res)
            }
            ).catch((e)=>{
                console.log(e)
                return new Promise((resolve, reject) => {
                    reject(e);
                })
            })
    },
    get(url, params) {
        return axios({
            method: "get",
            baseURL: BASE_URL,
            url,
            params, // get 请求时带的参数
            timeout: 10000,
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
            ).then(
            (res) => {
                return checkCode(res)
            }
            )
    }
}

function checkStatus(response) {

// loading
// 如果http状态码正常，则直接返回数据
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的数据，可以直接 return response.data
}
// 异常状态下，把错误信息返回去
return {
    status: -404,
    msg: "网络异常"
}

}

function checkCode(res) {

// 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
if (res.status === -404) {
    let vue = new Vue;
    vue.$message({ type: "error", message:res.msg});
}
// if (res.data && (!res.data.success)) {
//     alert(res.data.error_msg)
// }
return res

}

调用：

import request from ".././request.js"; 
let {data} =await request.post(options.url,data1);
let {data} =await request.get(options.url,data1);

请注意这里踩了两个坑：
1.设置axios.defaults.withCredentials = true   //请求时带上cookie这样请求时才会带上cookie
2.设置"Content-Type":"application/json",并JSON.stringify(data),这样后台才能正确接收到数据
3.当设置请求时带上cookie时后端允许的跨域不能用"*"要说明协议+域名+端口[相关问题](https://segmentfault.com/q/1010000011878964?_ea=2792154)

请求数据效果图：