axios基础

简介: axios基础

非常详细的axios

axios


基础操作:

请求方式:


get方法接收的是params,post接收的是data


两种格式:

//发送get请求
axios.get('地址',{params:{ 参数}}).then((res)=>{成功的回调})
//发送post请求
axios({
    method: 'post',  //请求方式,默认是get请求
    url:'/user/12345', //地址
    data:{ //参数
        firstName: 'simon',
        lastName: 'li'
    }
}).then((res)=>{成功的回调})

创建实列:

const base = axios.create(
  {
    // 基础路径
    baseURL: "http://localhost:3000"
  }
)
export const classify = (params) => {
  return base({ method: 'get', url: '/dj/recommend/type', params })
}

跨域

//vue里写
axios.get('/api', {
                    params: {
                        tf_id: 'TFM00R0_261',
                        page: this.num,
                        size: 10,
                    },
                })
                .then((res) => {
                    this.list = this.list.concat(res.data.result)
                    console.log(this.list)
                }).finally
        },
//vue.config.js中写(文件要放在全局)
module.exports = {
  // 设置打包后的根路径
  publicPath: './',
  // 关闭代码校验
  lintOnSave: false,
  // 关闭源码映射文件
  productionSourceMap: false,
  devServer: {
    // 自动打开文件
    open: true,
    proxy: {
      "/api": {
        target: "https://apiv2.pinduoduo.com/api/gindex/tf/query_tf_goods_info",
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          // 替换地址栏
          '^/api': ''
        }
      }
    }
  }
}


图片地址不完整


public 文件夹中找index.html,在head中加一句代码

<meta name="referrer" content="no-referrer">


之后在src中用字符串相加的形式补全地址

相关文章
|
4月前
axios引入的详细讲解
axios引入的详细讲解
|
3月前
|
JavaScript
vue对axios封装
vue对axios封装
|
JavaScript
vue中axios请求
vue中axios请求
46 0
|
4月前
|
前端开发 JavaScript
Axios有哪些常用的方法?
Axios有哪些常用的方法?
57 0
|
4月前
|
JavaScript 前端开发
vue axios封装
vue axios封装
48 0
|
JavaScript 前端开发
Vue 使用 axios 请求的两种方式
Vue 使用 axios 请求的两种方式
|
资源调度 前端开发 JavaScript
vue3 使用axios post方式使用
在Vue3中使用Axios进行POST请求的步骤如下:
623 0
|
前端开发 JavaScript
vue3 使用axios get方式使用
在Vue3中使用Axios库进行GET请求的方法如下: 首先需要导入Axios库:
327 0
|
前端开发 API
Vue--封装axios、跨域
Vue--封装axios、跨域