axios 二次封装使用

前端添加文件夹axios并建立index文件

然后index.js如下

import axios from 'axios'
import router from '../router'
import qs from 'qs'
// 5s后请求不到数据 请求超时
// axios.defaults.timeout=5000
// 处理post数据格式
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'
// 路径设置
// axios.defaults.baseURL=' http://localhost:8080'
// 跨域时设置cookie
axios.defaults.withCredentials = true
// 封装get post 方法

// get
export default{
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params
        })
        .then(response => {
          resolve(response);
        })
        .catch(err => {
          reject(err);
        })
    })
},
// post 
 post(url,params){
  return new Promise((resolve,reject)=>{
    axios({
      url,
      method:'post',
      transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return qs.stringify(data)
    }],
    data:params
    }).then(res=>{
      resolve(res)
    }).catch(err=>{
      reject(err)
    })
  })
  },

然后我对前端的整个数据接口放在了api文件夹下统一管理；这里就引用封装好的post和get方法。

common.js为管理url头部路径。

这里示例展示一下前后端交互

import {getList} from "../../api/index";//引用以上前端写好的接口
export default {
  data() {
    return {};
  },
  created() {
    this.bookList();
  },
  methods: {
    bookList() {
      getList({
        bookName: "marry"
      })//向后台传递参数
        .then(res => {
          if (res.status === 200) {
            console.log(res.data.result)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  }
};
</script>

后台接收参数：



以及后端congfig配置添加

const config = exports = {
    // 数据库配置
    mysql: {
      client: {
        host: 'localhost',
        port: '3306',
        user: 'root',
        password: 'root',
        database: 'mysqls',
        multipleStatements: true,
      },
      app: true,
      agent: false,
    },
    security: {
      csrf: {
        enable: false, // 前后端分离，post请求不方便携带_csrf
        ignoreJSON: true,
      },
      domainWhiteList: [ 'http://localhost:8080', 'http://192.168.109.1:8080' ], // 允许访问白名单
    },
    cors: {
      // origin: 'http://localhost:8080',
      credentials: true, // 允许跨域请求携带cookies
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
    },

}

下期内容：
登录验证 中间件使用