Vue脚本报错Uncaught TypeError: axios.ad is not a function，寻求排查方案

Hey there, let's break down this error and get your favoriting feature up and running smoothly.

What's Causing This Error? #

The axios.ad is not a function message boils down to one key issue: you’re trying to call a method named ad on the axios object, but axios doesn’t have this built-in method, and you haven’t defined a custom ad method for it either.

Since you mentioned adapting a tutorial that used post instead of ad, the most likely culprit is a simple typo or misinterpretation of how the original tutorial leveraged axios.

Step-by-Step Fixes #

1. Fix the Typo in Your Axios Method Call

Chances are, you accidentally replaced the standard axios HTTP method (like post or delete) with ad when adapting the tutorial.

For example, if the original tutorial had code like this:

axios.post('/posts/' + postId + '/favorite')

You might have incorrectly modified it to:

// ❌ Wrong - axios doesn't have an .ad() method
axios.ad('/ads/' + adId + '/favorite')

Instead, use the correct HTTP method for your action:

// ✅ Adding a favorite (POST request)
axios.post('/ads/' + adId + '/favorite')
  .then(response => {
    // Update your UI to reflect the favorited state
    this.ad.is_favorited = true;
  })
  .catch(error => {
    console.error('Error favoriting ad:', error);
  });

// ✅ Removing a favorite (DELETE request)
axios.delete('/ads/' + adId + '/favorite')
  .then(response => {
    this.ad.is_favorited = false;
  })
  .catch(error => {
    console.error('Error unfavoriting ad:', error);
  });

2. Create a Custom axios.ad() Method (If You Want the Resource Pattern)

If the original tutorial used a custom axios method for posts (e.g., axios.posts()), and you want to replicate that pattern for ads, you need to define the custom method in your app.js first:

// In app.js, after importing axios
axios.ad = function(method, endpoint, data = {}) {
  // Define your ad resource base URL
  const baseUrl = '/ads';
  return axios({
    method: method,
    url: `${baseUrl}${endpoint}`,
    data: data
  });
};

// Now you can use it like this for favoriting:
axios.ad('post', `/${adId}/favorite`)
  .then(res => { /* Update your UI here */ })
  .catch(err => { /* Handle error states */ });

3. Verify Your Backend Routes

Make sure your Laravel backend has the correct routes set up for the favoriting action. For example:

// In routes/web.php or routes/api.php
Route::post('/ads/{ad}/favorite', [AdController::class, 'favorite']);
Route::delete('/ads/{ad}/favorite', [AdController::class, 'unfavorite']);

Quick Troubleshooting Tip #

Open your browser’s DevTools (F12) and navigate to the Network tab. When you trigger the favorite action, check if a request is being sent. If no request appears, the issue is definitely in how you’re calling axios.

内容的提问来源于stack exchange，提问作者aguisa